在父指令和子指令之間共享變量

Question

我有兩條指令，一條代表數據列表，另一條代表必要的控件過濾該列表。像這樣的東西..

<item-list data-items="items"> 
    <list-filters></list-filters> 
    </item-list> 

我想要做的是有家長指導，在「itemList」，保持一定的濾鏡對象在它的範圍，然後讓孩子指令直接修改該對象，通過鏈接功能。

這裏有2個指令

app.directive('itemList', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     items: '=' 
    }, 
    transclude:true, 
    controller: function($scope){ 

     $scope.filter = {}; 

     $scope.add = function(){ 
     var length = $scope.items.length+1; 
     $scope.items.push({ 
      id: length, 
      name: 'item' + length 
     }); 
     }; 
    }, 
    templateUrl: 'list.html' 
    }; 
}); 

app.directive('listFilters', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'list-filters.html', 
    require: '^itemList', 
    link: function(scope, elem, attr, itemList){ 

     itemList.$watch('items', function(){ 
     scope.items = itemList.items; 
     }); 


     scope.change = function(item){ 
     console.log('change', item); 
     itemList.filter = item; 
     }; 

     scope.filter = itemList.filter; // ?? why can't I do this 

    } 
    } 
}); 

我無法弄清楚如何抓住該過濾器對象從itemList指令，有什麼建議？

http://plnkr.co/edit/mVSoxqpeYhwpMxYJFNwj?p=info

Answer 1

在你的鏈接功能參數itemList中是實際控制人的對象，你想要的是創建項目列表的接口，允許修改過濾器變量。

app.directive('itemList', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     items: '=' 
    }, 
    transclude:true, 
    controller: function($scope){ 
     $scope.filter 
     $scope.add = function(){ 
     var length = $scope.items.length+1; 
     $scope.items.push({ 
      id: length, 
      name: 'item' + length 
     }); 
     }; 

     this.updateFilterList = function(newList){ 
      $scope.apply(function(){$scope.filter = newList;}); 
     } 
    }, 
    templateUrl: 'list.html' 
    }; 
}); 




app.directive('listFilters', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'list-filters.html', 
    require: '^itemList', 
    link: function(scope, elem, attr, itemList){ 

     itemList.$watch('items', function(){ 
     scope.items = itemList.items; 
     }); 


     scope.change = function(item){ 
     console.log('change', item); 
     itemList.updateFilterList(item); 
     }; 

     //call the interface to update the filter list with whatever new object 
     itemList.updateFilterList(scope.filter); 
    } 
    } 
}); 

你的想法，它基本上建立在父控制器，允許修改其狀態的一些接口，並有孩子的指令利用該接口。

Answer 2

您的「listFilters」指令不會創建新的作用域，所以您應該只能訪問您在itemList控制器中設置的$ scope.filters對象，只需在listFilters指令的鏈接函數中使用「scope.filters」 。

Answer 3

我修改一點點代碼
見http://plnkr.co/edit/QF6p3JXQD3zT6Yio2f4U?p=preview
你的孩子指令範圍有機會獲得母公司指令性質。
但是，如果您更改子指令的propeties，父指令的屬性不會自動更改它們的值。
所以，你應該手動更改父範圍的性質，如果在兒童範圍發生了變化：

scope.$watch('filter', function(val, oldval) { 
     scope.$parent.filter = val; 
     })