45

Lets take a look to my directive:

angular.module('main').directive('datepicker', [
function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, ngModel) {
            ngModel.$modelValue = 'abc'; // this does not work
            // how do I change the value of the model?

So, how do I change the value of the ng-model?

Sady
  • 451
  • 1
  • 4
  • 4
  • Why don't you change the `$scope` value related? For now I've only used `$modelValue` to read it. Btw, the fourth attribute of the link function is `ngModelController` in your case, you should call it `controller` ;) – glepretre Mar 25 '14 at 16:14
  • @glepretre, how can I use scope? model is passing via html like this `` and I dont know the name of the model to use it with scope. and about `controller` call. Take a look at [link](http://docs.angularjs.org/api/ng/type/ngModel.NgModelController)this, how do they call it. But its wrong too, I think the best name probably will be `ngModelCtrl` – Sady Mar 25 '14 at 16:18
  • I tried all solutions from here but neither is supposed to work :( – vaske Jun 29 '15 at 17:03

5 Answers5

57

There are different ways of doing it:

  1. $setViewValue() updates the view and the model. Most cases it is enough.
  2. If you want to disconnect view from the model (e.g. model is a number but view is a string with thousands separators) then you could access directly to $viewValue and $modelValue
  3. If you also want to overwrite the content of ng-model (e.g. the directive changes the number of decimals, updating also the model), inject ngModel: '=' on the scope and set scope.ngModel

e.g.

  return {
     restrict: 'A',
     require: 'ngModel',
     scope: {
         ngModel: '='
     },
     link: function (scope, element, attrs, ngModelCtrl) {

        function updateView(value) {
            ngModelCtrl.$viewValue = value;
            ngModelCtrl.$render(); 
        }

        function updateModel(value) {
            ngModelCtrl.$modelValue = value;
            scope.ngModel = value; // overwrites ngModel value
        }
 ...

LINKS:

Carlos Morales
  • 5,676
  • 4
  • 34
  • 42
31

To work with complex binding expressions you should use the $parse service and the assign method.

For more information watch this video from ng-conf - it's all about the cool things you can do with the ng-model directive: https://www.youtube.com/watch?v=jVzymluqmg4

app.directive('datepicker', ['$parse',
    function($parse) {
        return {
            require: '?ngModel',
            link: function(scope, element, attributes, controller) {
                // $parse works out how to get the value.
                // This returns a function that returns the result of your ng-model expression.
                var modelGetter = $parse(attributes['ngModel']);
                console.log(modelGetter(scope));

                // This returns a function that lets us set the value of the ng-model binding expression:
                var modelSetter = modelGetter.assign;

                // This is how you can use it to set the value 'bar' on the given scope.
                modelSetter(scope, 'bar');

                console.log(modelGetter(scope));
            }
        };
    }
]);
Sly_cardinal
  • 12,270
  • 5
  • 49
  • 50
4

What you tried is actually working: see this Plunker

You don't "see" it in the input because changing the model this way doesn't call controller.$render() to set the new controller.$viewValue.

But why don't you simply change the $scope value (unless you don't know it, but it would be weird):

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          var model = attributes['ngModel'];
          scope[model] = 'bar';
        }
    };
}]);

And in your html:

<input ng-model="yourVariable" datepicker>

EDIT: (dynamic solution)

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          // get the value of the `ng-model` attribute
          var model = attributes['ngModel'];

          // update the scope if model is defined
          if (model) {
            scope[model] = 'bar';
          }
        }
    };
}]);
glepretre
  • 8,154
  • 5
  • 43
  • 57
  • but what if I change `` to ``. How directive will react? Note, that I need reusable directive – Sady Mar 25 '14 at 18:11
  • Your directive is reusable but `ng-model="foo"` must match `$scope.foo` to work, that's the point. I edited my answer to provide another solution to make it more dynamic. – glepretre Mar 26 '14 at 08:00
  • 1
    its still not reusable enough. What if I use complex models as `users[0].educations[1].name` ? – Sady Mar 26 '14 at 09:39
  • It will not work if your ngModel is bound to smth like "objectOnScope.nestedValue" – Alex Lapa Jun 19 '15 at 01:34
  • @AlexLapa Yes I know, it was not required in the question. That's why I did not used `$parse` in my answer but I'm a fair-player, I upvoted Sly_cardinal's one :) – glepretre Jun 19 '15 at 07:45
1

This works for a DatePicker on my site

link: function(scope, elem, attrs, ngModel) {
         scope.$apply(function(){
             ngModel.$viewValue = value;
         }
}
dball
  • 374
  • 2
  • 10
1

Here's the best explanation I've encountered. This helped me big time, and brings together details from a number of the other answers here.

TIP: Be careful to read the whole article rather than skim it, or else you are likely to miss some key bits!

https://www.nadeau.tv/post/using-ngmodelcontroller-with-custom-directives/

Nick
  • 1,334
  • 10
  • 14
John Rix
  • 6,271
  • 5
  • 40
  • 46