多ng-init範圍問題

我想通過ng-init使用ng-include通過只更改其數據來重新使用相同的組件。多ng-init範圍問題

分量代碼（「slider.html」，其中有沒有控制器）看起來是這樣的：

<div ng-repeat="person in persons"> 
    {{person.name}} 
</div>

從主視圖，我想重複使用相同的成分變更的「人」列表中，以便視圖我有：

<!--slider #1 --> 
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div>

，並在控制器I初始化2只列出「英語」和「德語」是這樣的：

$scope.english = records.filter(function(t){return t.nationality=="english";}); 
$scope.german = records.filter(function(t){return t.nationality=="german";});

會發生什麼是2個組件顯示相同的數據列表（德語）;有沒有辦法將2個不同的組合綁定到組件上？

來源

2014-10-27 Dario

看起來像一個良好的情況下，用於創建滑塊控件作爲自定義指令，而不是NG-包括以便您可以保持範圍清潔，提供獨特的界面，並避免像@Roberto Linares指出的問題。 – mccainz 2014-10-27 17:30:32

我結束了寫一個簡單的指令與一個孤立的範圍和「slider.html」作爲模板 – Dario 2014-10-27 22:42:09

（這兩個列表被設置爲德語）發生的原因是，最後，您只使用一個控制器，該控制器只有一個範圍，其中存在變量persons。當AngularJS啓動引導過程時，它會處理第一個ng-init，將當前控制器的個人變量更新爲英文。然後它處理第二個ng-init，再次更新相同persons變量現在到德文。然後，在呈現ng-repeat時，它將採用當前和唯一的persons變量數據，因此，它是德語中的所有內容。

你可以做的是爲每個組件（slider.html）設置一個獨立的控制器，因此每個控制器都有自己的綁定變量，因此你可以爲每個組件創建一個個人變量，並用你的ng獨立初始化每個控制器的變量-init指令。例如：

<div ng-controller="MySubController" ng-repeat="person in persons"> 
    {{person.name}} 
</div>

...

<!--slider #1 --> 
<div ng-init="initMySubController(english)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="initMySubController(german)" ng-include ="'inc/app/views/widgets/slider.html'"></div>

在JS文件：

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

myApp.controller('MySubController', ['$scope', function($scope) { 
    $scope.persons = []; 

    $scope.initMySubController = function(personsData) { 
     $scope.persons = personsData; 
    } 
}]);

來源

2014-10-27 17:27:44

多ng-init範圍問題

回答

相關問題