Question

例如，我有自己的指令创建隔离范围：

angular.module("main", []).directive("makeIsolateScope", function () {
    return {
        scope: {
            node: node
        }
    }
});

然后我将它与ng-repeat一起使用，它创建了新的继承范围：

<li ng-repeat="node in nodes" make-isolate-scope="node">{{node.name}}</li>

元素li的范围是什么？

Answer 1

事实证明，该元素将有两个范围：

由ng-repeat指令
创建的子范围
angular.element(el).scope();
隔离makeIsolateScope指令创建的范围：

angular.element(el).isolateScope();

订单如下：

1）调用ng-repeat编译函数，优先级低于2000（ng-repeat's优先级）的所有其他指令不编译为编译节点的一部分。这意味着现在makeIsolateDirective没有被编译。

2）由于ng-repeat被定义为transclude:element，整个节点被编译为转换编译过程的一部分，现在编译makeIsolateDirective并执行其编译功能。

3）ng-repeat执行链接功能，接收$ transcludeFn函数。此$transcludeFn函数执行n次，接收针对父节点的子范围（由转置机制创建）编译的克隆dom：

$transclude(function ngRepeatTransclude(clonedDom, scope) {
    // here clonedDom is the clone of the original <li> node

4）makeIsolateBindings的链接功能是使用此指令创建的隔离范围执行的。范围的父级是rootScope。

其他指令的链接功能（不创建隔离范围）使用子范围执行，该范围与$transcludeFn链接功能中的ng-repeat一起使用。

根据$$isolateBindings的转换机制创建的子范围，对从父级创建隔离范围和请求ng-repeat的指令进行评估。以下是源代码摘录：

forEach(isolateScope.$$isolateBindings = newIsolateScopeDirective.$$isolateBindings, function(definition, scopeName) {
...
case '=':
...
lastValue = isolateBindingContext[scopeName] = parentGet(scope); // the scope here is the child's scope created by transclusion

This article对了解$transcludeFn如何运作非常有用。

Answer 2

每个指令都有priority个数字，这是$compile的指南。默认优先级编号为0，ng-repeat为1000.因此，如果您将1001作为指令的优先级，则会提前编译，否则将提前编译ng-repeat。

Answer 3

为了避免这些麻烦，只需将您的指令移到li ..

中

创建新的继承和隔离范围的两个指令 - 元素得到的指令

3 个答案: