爲什麼指令的孩子不能讀取其指令的範圍？

Question

我有一個關於angularjs的指令範圍的問題。請看看下面的代碼：

HTML：

<div ng-controller="MyCtrl"> 
<!-- 1. works: --> 
<pre>{{controllerItems}}</pre> 


<my-list attr-items="controllerItems"> 

    <!-- 3. works not: --> 
    <pre>{{directiveItems}}</pre> 

    <!-- 4. works: --> 
    <pre>{{controllerItems}}</pre> 
</my-list> 
</div> 

JS：

angular.module('myapp', []) 

.controller('MyCtrl', function($scope) { 
    $scope.controllerItems = [ 
     'A', 'B', 'C', 'D'  
    ]; 
}) 

.directive('myList', function() { 
    return { 
     restrict: 'E', 
     transclude : true, 
     template : '<!-- 2. works: --><pre>{{directiveItems}}</pre><div ng-transclude></div>', 
     scope : { 
     directiveItems : '=attrItems' 
     }, 
     link: function (scope, element, attrs, ctrl) { 
     //console.log(scope); 
     } 
    } 
}); 

我試圖做的是創造一個指令，一個自己的範圍和所有的孩子。我爲範圍內的指令創建了一個新的範圍：{}並且期望，指令的所有孩子都可以使用它。但我得到的是，3.不知道directiveItems和4.父範圍仍然存在。

我的問題：我能做些什麼來創建一個帶有指令的單獨作用域，該指令也適用於所有子元素（如{{}}或其他默認和自定義元素？

你也可以在這裏找到代碼：http://plnkr.co/edit/kKtGdNt8Jq09zabwVoJo?p=preview

感謝您的幫助！

Answer 1

模板中使用的ng-transclude指令將transcluded內容綁定到原型繼承父範圍的新範圍（通過範圍$ new（））。因此，此新範圍可以看到controllerItems，而隔離範圍變量directiveItems不可用。

如果要將隔行掃描內容綁定到隔離範圍，請使用傳遞給鏈接函數的transcludeFn並將其傳遞給隔離範圍。需要注意的是，當你這樣做，controllerItems將不再可用：

.directive('myList', function() { 
    return { 
     restrict: 'E', 
     transclude : true, 
     template : '<pre>{{directiveItems}}</pre>', 
     scope : { 
     directiveItems : '=attrItems' 
     }, 
     link: function (scope, element, attrs, ctrl, transcludeFn) { 
     //Bind the transcluded content to the isolated scope 
     transcludeFn(scope, function (clone) { 
      element.after(clone); 
     } 
     } 
    } 
}); 

http://jsfiddle.net/vjxn7qyc/1/

使用此謹慎爲isolate範圍應該做到這一點，從外碼隔離本身。當你跨越聲稱知道隔離範圍的內容時，你就是在彎曲規則:)。