javascript - 多个 ng-init 范围问题

Question

我正在尝试将 ng-include 与 ng-init 结合使用，通过仅更改其数据来重新使用相同的组件。

组件代码(“slider.html”，没有 Controller )如下所示:

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

在主视图中，我想重用更改“人员”列表的相同组件，因此在 View 中我有:

<!--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>

然后在 Controller 中我初始化了 2 个列表“english”和“german”，如下所示:

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

发生的情况是这两个组件显示相同的数据列表(德语)；有没有办法将 2 个不同的集合绑定(bind)到组件？

Answer 1

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

您可以做的是为每个组件 (slider.html) 设置一个独立的 Controller ，因此每个 Controller 都有自己的绑定(bind)变量，因此您可以为每个 Controller 创建一个 person 变量，并使用您的 ng- 独立初始化每个 Controller 的变量初始化指令。示例:

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