Angular JS ng-model binding behavior

Question

I am writing an AngularJS directive and would like to bind the ng-model value to an array of objects in the controller. The $render in the directive link I would expect to be fired when anything in the array is changed. In fact, $render is only fired when the reference to the array is changed. Why is this and is this the intended behavior for ngModelController?

Code below demonstrates this behavior and also in this fiddle: http://jsfiddle.net/HandyManDan/RCctF/

<div ng-app="tryApp">
    <div ng-controller="MyCtrl">
        <div> Bound in controller: {{modelVals[0].val}}</div>
        <div> Bound in directive: <span my-dir="" ng-model="modelVals"></span></div>
        <button ng-click="lftBtn()">Mod deep</button>
        <button ng-click="rtBtn()">Mod ref</button>        
    </div>
</div>

myApp.controller('MyCtrl', function($scope) {
    $scope.modelVals = [{val:'val init'}];
    $scope.lftBtn = function() {
        $scope.modelVals[0].val = 'val change deep';
    };

    $scope.rtBtn = function() {
        $scope.modelVals = [{val:'val change ref'}];
    };

});

myApp.directive('myDir', function() {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ngModel.$render = function() {
                element.find('*').remove();
                var el = angular.element("<span>" + ngModel.$modelValue[0].val + "</span>)");
                element.append(el);
            };
        }
    };
});

qwertynl · Accepted Answer · 2014-02-26 19:06:52Z

1

Try rewriting your directive like so:

myApp.directive('myDir', function() {
    return {
        restrict: 'A',
        priority: 1,
        scope: {
            'ngModel': '='
        },
        template: "<span>{{ngModel[0].val}}</span>"
    };
});

Demo: http://jsfiddle.net/qwertynl/RCctF/16/

answered Feb 26, 2014 at 19:06

qwertynl

3,9331 gold badge24 silver badges43 bronze badges

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

2 Comments

HandyManDan Over a year ago

This made the fiddle work, but not a correct answer. The $render is still not fired.

qwertynl Over a year ago

@HandyManDan I removed the need for the jQuery extras in your code. There is no need for them. Just use the template :-) No need for the render ;-)

HandyManDan · Accepted Answer · 2014-02-27 03:33:30Z

After digging into angular source, I determined that this is intended behavior. It's documented somewhat here http://docs.angularjs.org/api/ng/directive/select

Note: ngModel compares by reference, not value. This is important when binding to an array of objects.

ngModelController sets up a watcher for the value bound to ng-model. The watch when fired subsequently calls $render. The watcher takes this form

$watch(watchExpression, [listener]);

This form of watch only watches for reference changes only.

To implement this functionality where the directive get an event when the object value changes, one would need to set up their own watch on the ng-model bound value using this form:

$watch(watchExpression, [listener], [objectEquality]);

Setting objectEquality to true indicates object value compare.

Using $watch rather than $render unfortunately bypasses the formatter/validator chain of ngModelController.

Collectives™ on Stack Overflow

Angular JS ng-model binding behavior

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related