5

我正在尝试将 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 个不同的集合绑定到组件？

4

1 回答 1

4

发生这种情况（将两个列表都设置为德语）是因为最后您只使用一个控制器，该控制器只有一个persons变量存在的范围。当 AngularJS 开始引导过程时，它会处理第一个 ng-init，将当前控制器的 people 变量更新为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;
    }
}]);
于 2014-10-27T17:27:44.680 回答