AngularJS-隔离范围从父母到孩子的孩子？

Question

我有以下简单的三层标记，每一层都是其自己的指令。

<div class="schedule">
    <div class="shift" ng-repeat="shift in schedule.shifts">
        <div class="task" ng-repeat="task in shift.tasks">

虽然我没有在上面的标记中显示它，但是我希望每一层都是一个隔离的范围（因此， shifts是隔离的， tasks也被隔离在shifts ）。

我在schedule类中有一个作用域，称为scope.clipboard 。 我想部署它，并允许task访问这个scope.clipboard 。

由于通过隔离shift ，我需要传递该shift可以访问的所有内容，因此，我知道如何执行此操作的唯一方法是传递scope.clipboard进行shift ，以便随后将其传递给task ，即：

app.directive('shift', function()
{
    return {
        scope: { clipboard : '=' }
    }
}

app.directive('task', function()
{
    return {
        scope: { clipboard : '=' }
    }
}

这是正确的方法吗？ 换句话说，如果要将隔离范围从第1层传递到第3层，是否还需要将其传递到第2层？

Answer 1

是的，要将任何东西从第一层传递到第三层（使用隔离范围和您想要的其他技术），您需要将其从每一层传递到下一层。

但是，由于您的父母没有重复（这是单身），因此您可能需要考虑将其移至服务中。 无论如何，这几乎总是共享材料的正确选择，因为默认情况下服务是单例的，因此它们是可注入的（易于测试），并且会清理所有这些。 该服务甚至不需要做任何事情，只需公开指令可以引用的this.clipboard=...值即可。 然后只需将服务注入每个指令即可。

Answer 2

最简单的方法是在外部控制器范围内声明剪贴板，然后将剪贴板传递给指令：

JS

app.controller('ctrl', function($scope) {
   $scope.clipboard = {...};
});

的HTML

<div ng-controller="ctrl">
   <div clipboard="clipboard" class="schedule">
      <div clipboard="clipboard" class="shift" ng-repeat="shift in schedule.shifts">
          <div clipboard="clipboard" class="task" ng-repeat="task in shift.tasks">

注意：当您在HTML中看到嵌套指令时，您应该立即注意到存在一个范围层次结构-意味着父范围（ctrl）有一个子范围（schedule）。 父范围（时​​间表）具有子范围（班次）； 由于ng-repeat，父作用域（shift）具有多个子作用域。 由于作用域继承正在进行中，因此clipboard对所有作用域都是可见的。 现在，每个指令也具有隔离的作用域-它是我刚才提到的子作用域的姐妹作用域。 您只是将clipboard从外部范围（通过范围继承解决）传递到每个（姐妹）隔离的范围。

在您的指令中，使用'='绑定将剪贴板从子（包含）范围传递到隔离（姐妹）范围：

app.directive('schedule', function() {
    return {
        restrict:'M',
        scope: { clipboard:'='},
        link: ...
    }
});


app.directive('shift', function() {
    return {
        restrict:'M',
        scope: { clipboard:'='},
        link: ...
    }
});


app.directive('task', function() {
    return {
        restrict:'M',
        scope: { clipboard:'='},
        link: ...
    }
});