角度双向绑定未按预期工作

Question

This is my drective. value is bound to a scope variable (session_number) and change is a function that get the current session_number and perform some checks.

return {
                restrict: 'A',
                scope: { value: '=value',change:'&change' },
                template: '<a href="javascript:;" class="counter-minus" ng-click="minus()">-</a>\
                          <input type="text" class="counter-field" ng-model="value" ng-change="changed()" ng-readonly="readonly">\
                          <a  href="javascript:;" class="counter-plus" ng-click="plus()">+</a>',

        link: function( scope , element , attributes ) {
                        // Make sure the value attribute is not missing.
                        if ( angular.isUndefined(scope.value) ) {
                            throw "Missing the value attribute on the counter directive.";
                        }

                        var min = angular.isUndefined(attributes.min) ? null : parseInt(attributes.min);
                        var max = angular.isUndefined(attributes.max) ? null : parseInt(attributes.max);
                        var step = angular.isUndefined(attributes.step) ? 1 : parseInt(attributes.step);

                        element.addClass('counter-container');

                        // If the 'editable' attribute is set, we will make the field editable.
                        scope.readonly = angular.isUndefined(attributes.editable) ? true : false;

                        /**
                         * Sets the value as an integer.
                         */
                        var setValue = function( val ) {

                            scope.value = parseInt( val );                    
                            scope.change();


                        }
                        setValue(scope.value + 1);
          }

     }

I was wondering, why scope.change() is executed before scope.value . Because inside change() I used session_number that is bound to scope.value , but always session_number has a old value. Its like when scope.change() is executed, scope.value did not change session_number variable yet.

Answer 1

I know what the problem is, thanks to this answer:

AngularJS - directive with ng-transclude, no two-way binding

Two-2-way bidining using primitive values does not work as expected.

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (ie, form elements, ng-model) to a primitive (eg, number, string, boolean) defined on the parent scope from inside the child scope.

So I needed to change value binding from primitive value to an object.