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

Question

我有以下情形

我有一个控制器和几个指令，一个与transclude开关（这似乎是导致该问题）相结合的网页。

当我点击“changeMe（）”时，示波器的值更改为erez。

当我点击“close”时，我们将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指令会在控制器的作用域下创建一个NEW范围。因此，无论何时从不存在的第一级属性（即$scope.name）中读取，它都会从父级读取。当它写入时，它写入自己。并进一步读取访问本身。 第一级继承属性的更改永远不会传播到原型父级！

结帐分叉plunk与此原则;并确保您了解Javascript的原型继承，并将其应用于Angular的范围。