Question

我下载了一个名为abn_tree的角度指令，用于构建角度的文件系统视图。

abn_tree嵌套在另一个指令中。我的包含指令的模板结构如下所示

<div class=resizable-sideways" ng-controller="FileSystem">
    <abn-tree tree-data="explorer" on-select="treeSelected(branch)"></abn-tree>
</div>

在初始div中，resizable-sideways是一个指令。在我的FileSystem控制器中，我设置了资源管理器的数据，但当我查看abn-tree的范围时，在控制台中，它显示treeData=undefined。

abn_tree定义是，

   restrict: 'E',
templateUrl: 'vendor/angular-bootstrap-nav-tree/dist/abn_tree_template.html',
scope: {
  treeData: '=',
  onSelect: '&',
  initialSelection: '='
},
link: function(scope, element, attrs) {

但是，如果我更改html结构并删除resizable-sideways指令，一切正常。

我将可调整大小的横向定义为

return {
        restrict: 'CA',
        transclude: true,
        template: '<div class="favor-resizable-container"><div class="favor-resizable-container-wrapper" ng-transclude></div><div class="favor-resizable-bar"></div></div>',
        link: function(scope,elem,attrs){

我使用resizable-sideways将内容包装在可调整大小的div中。我的猜测是，当abn-tree标签被包装时，abn-tree的范围被设置为可调整大小。有没有办法确保可调整大小的横向始终将其父作用域传递给子元素，直到定义了新的作用域？

它可能看起来过于复杂，但我正在尝试创建一个非常模块化的应用程序，用户可以决定他们想要包含哪些功能，因此，我不能绝对肯定地说，父作用域应该是什么。所以希望有一种方法可以让我将resizable设置为不具有范围，继承它的父范围（我认为是默认值），或者其他一些解决方案。

同样奇怪的是，将ng-controller直接添加到abn-tree代码也无济于事。

Answer 1

Transclude会更改已转换元素的范围。 Angular guide to directives：

transclude选项会更改范围嵌套的方式。它成功了所以transcluded指令的内容具有任何范围在指令之外，而不是内部的任何范围。在这样做，它使内容访问外部范围。

你可以看到这是如何发挥出来的in this fiddle。您将看到resizable具有范围3和父范围2.而abn具有范围5，父4，祖父2。关键是abn没有范围3，ngController在其中是继承链。这是因为被转换的范围“无论范围是什么在指令之外“。

一种解决方案是让ngController成为两者的父母：

<div ng-controller="FileSystem">
   <div class="resizable-sideways">
     <abn-tree tree-data="explorer" on-select="treeSelected(branch)"></abn-tree>
   </div>
</div>

或者你真的不需要换取你所做的事情。相反，您可以在元素上使用jQlite wrap和append来修改它（从而避免转换范围问题）：

myApp.directive("resizable",function() {
            return {
        restrict: 'CA',
        link: function(scope,elem,attrs){
             elem.wrap('<div class="favor-resizable-container-wrapper"></div>');
             elem.append('<div class="favor-resizable-bar"></div>');
             elem.wrap('<div class="favor-resizable-container"></div>');
        ....  
    }

这是fiddle with that mocked up

嵌套的角度指令没有得到正确的范围

1 个答案: