为什么指令的孩子不能读取其指令的范围？

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范围应该做到这一点，从外码隔离本身。当你跨越声称知道隔离范围的内容时，你就是在弯曲规则:)。