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