Javascript 与子指令作用域共享作用域对象

我有一个parent指令，它在

link

期间创建第三方对象的实例，并且该变量需要能够被子指令访问

但是，有两个限制：

• 每页可能有多个这样的实例，因此javascript文件顶部的单个实例不起作用
• 子指令是递归的，因此它们必须创建自己的作用域

我能想到的唯一方法是将该值作为属性传递给每个子指令。这感觉效率低下，但鉴于上述限制，我看不到任何替代方案

// Some imaginary third-party object
function Tree() {}

// Root directive which creates an instance of the object, links to the page, and loads the data needed.
app.directive('tree', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><nodes nodes="nodes"></nodes></div>',
        scope: {
          nodes: '='
        },
        link: function(scope, $element) {
           // This value needs to be accessible to all child directives
           scope.tree = new Tree();
        }
    };
});

// A directive to render an array of nodes
app.directive('nodes', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ol>' +
            '<li ng-repeat="node in nodes track by node.id">' +
                '<node node="node"></node>' +
            '</li>' +
        '</ol>',
        scope: {
            nodes: '='
        }
    };
});

// A directive to render a single node, and recursively any child nodes
app.directive('node', ['$compile', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            node: '='
        },
        template: '<div><span ng-bind="node.text"></span></div>',
        link: function(scope, $element) {
            if (scope.node.children && scope.node.children.length > 0) {
              console.log(scope.node.children);
                var tmpl = '<nodes nodes="node.children"></nodes>';
                var children = $compile(tmpl)(scope);
                $element.append(children);
            }

            // @todo Here's a good example of where I need access to scope.tree
        }
    };
}]);

//某个虚构的第三方对象
函数树（）{}
//Root指令，它创建对象的实例、链接到页面并加载所需的数据。
app.directive（'tree'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
范围：{
节点：'='
},
链接：功能（范围，$element）{
//所有子指令都需要访问此值
scope.tree=新树（）；
}
};
});
//用于渲染节点数组的指令
app.directive（'nodes'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”+
“
”+
'' +
“
”+
'',
范围：{
节点：'='
}
};
});
//用于呈现单个节点和递归任何子节点的指令
app.directive（'node'，['$compile'，function（$compile）{
返回{
限制：'E'，
替换：正确，
范围：{
节点：'='
},
模板：“”，
链接：功能（范围，$element）{
if（scope.node.children&&scope.node.children.length>0）{
console.log（scope.node.children）；
var tmpl=“”；
var children=$compile（tmpl）（范围）；
$element.append（子元素）；
}
//@todo这是一个很好的例子，说明我需要访问scope.tree的位置
}
};
}]);

我能想到的唯一解决方案是将

tree:'='

添加到

scope

对象中，然后将

tree=“tree”

传递给每个子对象

---

一种解决方案是不隔离作用域，这样子指令将从其父作用域继承。如果父级具有

scope.tree=new tree（）

，则嵌套指令将继承

scope.tree

但是，由于您提到每页可以有多个实例，这意味着您可能需要一个独立的作用域（这是您当前拥有的）。将数据传递到隔离范围的唯一方法是通过标记中的指令属性

---

我想您已经回答了您自己的问题：）

一个解决方案是不隔离作用域，这样子指令将从父作用域继承。如果父级具有

scope.tree=new tree（）

，则嵌套指令将继承

scope.tree

但是，由于您提到每页可以有多个实例，这意味着您可能需要一个独立的作用域（这是您当前拥有的）。将数据传递到隔离范围的唯一方法是通过标记中的指令属性

---

我想你回答了你自己的问题：）

另一个问题是我需要隔离绑定到属性的作用域，因为这些是递归指令，我不能一直重新分配作用域数组。另一个问题是我需要隔离绑定到属性的作用域，因为这些是递归指令，我不能一直重新分配作用域数组。