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传递给{{1然后我可以将它传递给shift，即：

task

这是正确的方法吗？换句话说，如果要将隔离范围从第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）具有子范围（shift）;由于ng-repeat，父范围（shift）有几个子范围。由于范围继承在起作用，因此clipboard对所有范围都是可见的。现在每个指令也有孤立的范围 - 它是我刚才提到的子范围的姐妹范围。您只是将clipboard从外部范围（通过范围继承解析）传递到每个（姐妹）隔离范围。

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

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: ...
    }
});

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

2 个答案: