多个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>

在控制器中我初始化2个列表"英语"和"德语",如下所示:

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

会发生的是,2个组件显示相同的数据列表(德语); 有没有办法将2个不同的集合绑定到组件？

Answer 1

发生这种情况（将两个列表都设置为德语）是因为，最后您只使用一个控制器，该控制器只有一个变量persons存在的范围。当 AngularJS 开始引导过程时，它会处理第一个 ng-init，将当前控制器的 person 变量更新为English。然后它处理第二个 ng-init，再次将相同的persons变量更新为German。然后，当渲染 ng-repeat 时，它将采用当前且唯一的persons变量数据，因此，一切都是德语。

您可以做的是每个组件都有一个独立的控制器（slider.html），因此每个控制器都有自己的绑定变量，因此您可以为每个控制器创建一个 person 变量，并使用 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;
    }
}]);