多个ng-init范围问题

Question

我试图使用ng-include with ng-init，只通过更改它的数据来重用相同的组件。

组件代码("slider.html"，它没有控制器)如下所示：

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

从主视图来看，我希望重用更改"persons“列表的相同组件，因此在视图中有：

<!--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“和”德语“，如下所示：

 $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，将当前控制器的persons变量更新为English。然后，它处理第二个ng-init，再次将相同的persons变量更新为德语。然后，当呈现ng重复时，它将接受当前和唯一的persons变量数据，因此，它是德语中的所有内容。

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