为什么角度绑定在传入时会中断指令之间的绑定

Why does angular binding breaks between directives when transcluded?

本文关键字：绑定 中断 指令 之间 为什么      更新时间：2023-09-26

我有以下场景

我将一个页面与一个控制器和几个指令结合在一起，其中一个指令打开了transclude开关（这似乎导致了问题）。

当我点击"changeMe（）"时，作用域的值将更改为erez。

当我单击"关闭"时，我们将null分配给指令范围内的属性。我用null以外的值验证了相同的场景。。。

当我再次点击"changeMe（）"时。。。什么都没发生！！为什么？我该如何修复它？

HTML模板

<div my-layout="">
  <button ng-click="changeName()">Change me!</button>
  <div>
     {{name}} - This is my name directive
     <div my-name name="name"></div>
  </div>
</div>

Javascript代码

angular.module('guy', []);
angular.module('guy').controller('GuyCtrl', function($scope){
  $scope.name = 'guy';
  $scope.changeName = function(){
    $scope.name = 'erez';
  }
});

angular.module('guy').directive('myName',function ($log) {
        return {
            template: '<div> my name is: {{name}} <button ng-click="close()">Close</button></div>',
            restrict: 'EA',
            scope: {
                name : '=name'
            },
            link: function postLink($scope, element) {
              $scope.close = function(){
                $scope.name = null;
              }
            }
        }
    }
);

angular.module('guy').directive('myLayout',function ($log) {
        return {
            template: '<div>This is the grand layout<div ng-transclude></div></div>',
            restrict: 'EA',
            transclude:true, 

            link: function postLink($scope, element) {
                 $log.info('linking layout');
            }
        }
    }
);

您可以使用这个plunkr来运行它

您是原型作用域继承的受害者。简言之：永远不要使用一级（即$scope.xxx）属性进行双向绑定。相反，使用包装器对象（data或model是方便的名称）作为：$scope.data = { name: 'guy' }。

结果是，通过原型作用域继承，myLayout指令在控制器的作用域下创建了一个NEW作用域。因此，每当它从不存在的第一级属性（即$scope.name）读取时，它都会从父级读取。当它写东西的时候，它自己写。并且进一步读取访问本身对一级继承属性的更改永远不会传播到原型父级

用这个原理检验一个分叉的plunk；并确保您了解Javascript的原型继承，它应用于Angular的作用域。

相关文章：