爲什麼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的範圍。