多個ng-init范圍問題

Question

我試圖將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>

在控制器中，我初始化了兩個列表“ english”和“ german”，如下所示：

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

發生的情況是這兩個組件顯示相同的數據列表（德語）。 有沒有辦法將兩個不同的集合綁定到組件？

Answer 1

之所以會這樣（將兩個列表都設置為德語）是因為，最后，您僅使用一個控制器，而該控制器只有一個范圍，其中存在可變persons 。 當AngularJS開始其引導過程時，它將處理第一個ng-init，將當前控制器的person變量更新為English 。 然后，它處理第二個ng-init，再次將相同的persons變量更新為German 。 然后，在渲染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;
    }
}]);