How to update the input text value using custom Directive in angularjs

Question

I am newer in angularjs. I am just trying to update the input txt value using custom Directive. But i cant. Here i have showed my code What i did wrong this code. Some one help me and explain how it is working.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.myTime = '10:59';
}


myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.ngModel, function (v) {
                console.log('value changed, new value is: ' + v);
               ngModel.$setViewValue('11')
               //scope.ngModel = '11'
               
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!
    
    
    <input type="text" my-directive ng-model="myTime" name="customTime">
    
</div>

Arkantos · Accepted Answer · 2015-10-07 12:47:00Z

3

You should register your MyCtrl controller in your myApp module like below.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',MyCtrl);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.myTime = '10:59';
}

If you need to update the text field value to some desired value, once you're done with the update in the watcher using $setViewValue(), you need to call $render() as well on NgModelController.

link: function (scope, element, attrs, ngModel) {
    scope.$watch(attrs.ngModel, function (v) {
        console.log('value changed, new value is: ' + v);
       ngModel.$setViewValue('11');
       ngModel.$render();
    });
}

Here's a Pen to check this change.

edited Oct 7, 2015 at 12:47

answered Oct 7, 2015 at 12:30

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arkantos Over a year ago

I thought you're just trying to capture the updated value in your watcher, if you need to update the text field to some desired value, you need to call $render() as well after $setViewValue(). Updated my answer to reflect that.

Arkantos Over a year ago

Glad to be of help :)

cfprabhu Over a year ago

Thank you so much friend :)

Collectives™ on Stack Overflow

How to update the input text value using custom Directive in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related