多个ng初始化范围问题

Multiple ng-init scope issues

本文关键字：问题 范围 初始化 ng 多个      更新时间：2023-09-26

我正试图将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>

在控制器中，我初始化了两个列表"英语"answers"德语"，如下所示：

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

结果是，这两个组件显示了相同的数据列表（德语）；有没有办法将两个不同的集合绑定到组件上？

之所以会发生这种情况（两个列表都设置为德语），是因为最后，您只使用了一个控制器，该控制器只有一个作用域，其中存在persons变量。当AngularJS启动其自举过程时，它会处理第一个ng init，将当前控制器的persons变量更新为英语。然后，它处理第二个ng init，再次将相同的persons变量更新为德语。然后，当ng repeat被渲染时，它将获取当前和唯一的persons变量数据，因此，它是德语中的一切。

你可以做的是每个组件都有一个独立的控制器（slider.html），所以每个控制器都有自己的绑定变量，这样你就可以为每个组件创建一个person变量，并使用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;
    }
}]);
相关文章：