具有子指令的父項在創建新的作用域時不起作用

Question

我已經創建了一個父指令，它可以從給定的URL檢索數據，這很好。 作爲第二步，我要幾個孩子的指令，如之間的數據分發：

<parent data="some/url/with/json/response"> 
    <child data="data[0]"></child> 
    <child data="data[1]"></child> 
    ... 
</parent> 

這也能正常工作。但是，在創建另一組指令時，舊數據會被覆蓋，因爲父指令不會創建新的作用域，而會覆蓋主作用域中的所有內容。當指定在該指令的下列行之一，沒有數據在所有示出（和現在錯誤味精出現）：

scope: true, 
//or 
scope: {}, 

這裏的故障狀況的plunker例如：http://plnkr.co/edit/GWcLrhaUHNLPWNkOHIS8?p=preview 頂部部分應該有「這工作中」。

所以問題是：有誰知道我可以如何強制父指令創建一個新的範圍，所有子元素都可以訪問？

Answer 1

我終於找到了一個解決方案，它也看起來不錯。因爲plunker默認使用angular 1.2創建了一個腳本，所以我之前沒有找到這個解決方案（顯然它只能在1.3.x中運行）。現在，每條父指令都創建了自己的作用域，並且它也是這樣做的。然後，通過使用這個符號（以$父），顯示正確的數據：

<parent-bind-scope working=true> 
    Should be working: 
    <child-bind-scope data="$parent.working"></child-bind-scope> 
</parent-bind-scope> 

另見：http://plnkr.co/edit/NkVxpjryD8YQm9xovw4M?p=preview

當使用REMCO的答案，並創建爲孩子們一個孤立的範圍，我只好用$ parent。$ parent得到相同的結果，所以這對這個解決方案來說是一個很棒的步驟。

增加：雖然使用ng-repeat時很奇怪，但在我的真實代碼中，我現在必須做$ parent。$ parent。$父這樣得到它的工作：

//not the exact code 
<parent parentdata="/url/with/data"> 
    <div ng-repeat="i in $parent.range($parentdata.data.cols.length) track by $index"> 
     <child data1="$parent.$parent.$parent.parentdata.cols[$index]" 
       data2="$parent.$parent.$parent.parentdata.rows[$index]"/> 
    </div> 
</parent> 

Answer 2

用途：

scope: false 

在你子作用域從在子元素的父元素保留範圍。

使用true或{}稱爲isolateScope，這就是它的原因。保護兒童示波器。

Answer 3

問題是父指令是繼承範圍（控制器的範圍），因此所有的父指令基本上共享相同的範圍。當父母雙方共享同一個作用域時，最後一條要執行的指令（沒有「working」屬性的父指令）將在共享作用域上定義'working'屬性，在鏈接實現中，它指定$ scope.working =「this不管用」。

<!-- bind object to child scope --> 
<parent-bind-scope working=true> 
    Should be working: 
    <child-bind-scope data="working"></child-bind-scope> 
</parent-bind-scope> 

<br> 

<parent-bind-scope> 
    Should not be working: 
    <child-bind-scope data="working"></child-bind-scope> 
</parent-bind-scope> 

如果你把報警時，$ scope.working分配，你可以看到它正在執行，如果條件的兩個分支（與其他控制流，是最後一個）：

controller: function($scope, $attrs) { 
    if($attrs.working) { 
    alert('working attribute exists'); 
    $scope.working = {key: 'this is working'}; 
    } else { 
    alert('working attribute does not exist'); 
    $scope.working = {key: 'this is not working'}; 
    } 

} 

Answer 4

在你的孩子的指令，你應該評估串父範圍，就像這樣：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.directive('parentBindScope', function($timeout) { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: true, 
    template: '<div ng-transclude></div>', 
    controller: function($scope, $attrs) { 
     if($attrs.working) { 
      $scope.working = {key: 'this is working'}; 
     } else { 
     $scope.working = { key: 'something else' } 
     $timeout(function(){ 
      $scope.working = {key: 'this is not working'}; 
     },1000) 

     } 

    } 
    } 
}); 

app.directive('childBindScope', function($parse) { 
    return { 
    restrict: 'E', 
    template: '<div>child-template: {{data}}</div>', 
    controller: function($scope, $attrs) { 
     $scope.$watch('$parent.' + $attrs.data, function() { 
     $scope.data = $scope.$parent.$eval($attrs.data); 
     }); 
    }, 
    link: function(scope, element, attrs) { 
     console.log('data: ' + JSON.stringify(scope.data)); 
    } 
    } 
})