具有隔离范围的角度双向绑定似乎是单向的

Question

I have written a simple click-to-edit directive using an isolate scope so that it's reusable. When I use it, the source value ( '=' ) in the controller scope is never updated, though its original value is applied within the directive. It's as if the binding is one-way ( '@' ).

Here's the code:

app.directive("ngClickToEdit", function() {
    return {
        template:
            '<div>' +
                '<div ng-show="enabled">' +
                    '<input ng-change="validator()" ng-blur="enabled=false"  ng-model="source"/>' +
                '</div>' +
                    '<div ng-show="!enabled" ng-bind="source" ng-click="enable()"></div>' +
            '</div>',
        restrict: "E",
        replace: true,
        scope: {
            validator: '&',
            source: '=',
        },
        link: function(scope, element) {
            scope.enabled = false;

            var input = element.children()[0].firstChild;

            scope.enable = function() {
                scope.enabled = true;
                setTimeout(function() {
                    input.focus();
                    input.select();
                }, 200);
            };
        },
    };
});

Here is an invocation in the controller (edited to wrap in ng-if div block):

<div ng-if='name'>
    <ng-click-to-edit validator='validateName()' source='name' />
</div>

When validateName() in the controller scope is invoked the value of 'name' is the original value and not the (changed) value in the directive's input control. The model is not updated. Why?

Resolved : The ng-if block creates a child scope, passing name as a string primitive due to prototypal inheritance . Passing an object reference into the directive solves the problem. See a revised plunker here.

Answer 1

This is because outer scope's name has not yet been assigned the inner scope's source . When you declare an isolate scope with "=" , Angular $watch es for changes (see code ) in both values and does the two-way binding, but the $watches haven't yet fired when validator is invoked.

You can check it with this code:

$scope.validateName = function(){
  console.log("outside directive: name = " + $scope.name);

  $timeout(function(){
    console.log("but just after digest cycle: name = " + $scope.name);
  });
};

There are a few things you could do:

1) You could fire validator after $timeout :

scope.localValidate = function(){
   $timeout(function(){ scope.validator(); });
};

and the template:

<input ng-change="localValidate()"..>

2) You could $watch for changes in source and then fire the $validator (instead of in ng-change ):

scope.$watch("source", function(){
    scope.validator();
});

3) You could pass the value to validate into the validator function:

<input ng-change="validator({name: source})"..>