Question

我有以下情况

我将一个页面与一个控制器和几个指令相结合，一个指令打开了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');
            }
        }
    }
);

您可以使用this plunkr to run it

Answer 1

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

通过原型范围继承，myLayout指令在控制器的范围内创建一个新范围。因此，只要它从不存在的第一级属性（即$scope.name）读取，它就从父级读取。写入时，它会写入自身。进一步的读取也会访问自己。 对第一级继承属性的更改永远不会传播到原型父级！

使用此原则签出分叉plunk;并确保您了解Javascript的原型继承，它适用于Angular的范围。

为什么转换时指令之间的角度绑定会中断？

1 个答案: