嵌套指令的角度隔離範圍

Question

我試圖用三個指令 - 容器，getter和setter來設置角度的應用程序。我已經把它在 http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

<container> 
    <getter name="first"></getter> 
    <getter name="second"></getter> 
    <setter name="setter"></setter> 
</container> 

Container具有可變value可以通過getter和setter讀取的範圍。 getter顯示值，而setter都顯示並更改值。

angular.module("app").directive('container', function() { 
     return { 
     scope: {}, 
     template: '<h1>Container <input ng-model="value"/></h1><div ng-transclude>SCOPED1</div>', 
     transclude: true, 
     controller: ["$scope", "$window", function($scope, $window){ 
      $scope.value = "Hello" 
     }] 
     }; 
    }); 

兩個getter和setter有自己的分離範圍，但也有一個雙向綁定到container範圍，以獲取和設置value。

angular.module("app").directive('getter', function() { 
     return { 
     require: '^container', 
     scope: { 
      name: '@', 
      value:'=' 
      }, 
     template: '<p>I am getter {{name}}, I got {{value}}</p>' 
     }; 
    }); 

目前，getter和setter可以訪問使用$scope.$parent.$parent.value的container範圍，但似乎太笨重。我認爲使用scope:{value:'='}會建立雙向綁定，但顯然不是。

我在做什麼錯？

http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

Answer 1

該指令隔離範圍並不自動鏈接到父範圍內的變量。您必須在父範圍內告訴指令value應該是value，這與提供指令名稱的方式相同。

<container value="value"> 
    <getter name="first" value="value"></getter> 
    <getter name="second" value="value"></getter> 
    <setter name="setter" value="value"></setter> 
</container>