多个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;
    }
}]);