多个 ng-init 范围问题答案

【问题标题】：Multiple ng-init scope issues多个 ng-init 范围问题
【发布时间】：2014-10-27 17:08:01
【问题描述】：

我正在尝试将 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 个列表“english”和“german”：

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

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

【问题讨论】：

看起来像是将滑块小部件创建为自定义指令而不是 ng-include 的好案例，这样您就可以保持范围干净，提供独特的界面，并避免像 @Roberto Linares 指出的问题出来。
我最终写了一个简单的指令，它有一个孤立的范围，并以“slider.html”作为模板

标签： javascript angularjs angularjs-scope angularjs-ng-init

【解决方案1】：

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

您可以做的是为每个组件（slider.html）设置一个独立的控制器，因此每个控制器都有自己的绑定变量，因此您可以为每个控制器创建一个人员变量，并使用您的 ng- 独立初始化每个控制器的变量初始化指令。示例：

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

【讨论】：