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

问题

See that DEMO

<body ng-controller="MainCtrl">

    {{ obj }}

    <dir>
      <input type="text" ng-model="obj" />
    </dir>

  </body>

Why when I change the obj scope variable in the custom directive with ng-transclude I don't change it in the MainCtrl $scope.obj.

But when I have $scope.obj = { name : 'test' }; in MainCtrl the two-way binding is working the way I expect.

See the working DEMO

<body ng-controller="MainCtrl">

    {{ obj.name }}

    <dir>
      <input type="text" ng-model="obj.name" />
    </dir>

  </body>

What is the explanation of this behavior?

回答1:

There is an issue with accessing primitive variables on the parent scope from the child scope. You have a child scope because having transclude: true creates a new scope.

You really should read this article to have a deep understanding of what's going on.

The highlights from the article:

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

And

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

What happens is that the parent scope is not consulted when it comes to primitives. It's a Javascript thing, not even Angular's.

I've also created a Demo of object hiding from child scope. (shadowing a non-primitive object):

app.directive('dir', function () {
    return {
        restrict: 'E',

        scope: true,
        template: "<div><input type=\"text\" ng-model=\"obj.name\" /></div>",
        link: function(scope, element, attrs) {
          scope.obj = {name : "newname"}; 
        }

    };
});

回答2:

The transcluded html generate a child scope of the MainCtrl when write this new property (obj) the child scope generate a new one that overwrite the parent.

The prototype chain is not consulted, and a new aString property is added to the childScope. This new property hides/shadows the parentScope property with the same name.

The modified version works because the child scope (transcluded) access first to obj (reference) and then to the property name

Learn more about the scope inheritance at https://github.com/angular/angular.js/wiki/Understanding-Scopes

And the transclusion and scope behavior at http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

回答3:

This works when you consult the value of obj from the same scope - the directive's scope:

<body ng-controller="MainCtrl">

  {{ obj }}

  <dir>
    <p>
      The following text will be synched with the model:
    </p>
    <span>{{ obj }}</span>
    <br/>
    <input type="text" ng-model='obj' />
  </dir>

</body>

来源：https://stackoverflow.com/questions/28503688/angularjs-directive-with-ng-transclude-no-two-way-binding

标签

angularjs

angularjs-ng-transclude