1。工厂/服务

Question

我有两个控制器，第一个控制器包含一个项目列表：

$scope.items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];

第二个绑定到一个模板，该模板显示所选项目列表：

$scope.myitems = [1,2,3,...]; // ids only

 <div ng-repeat="item in myitems">
   {{item.id}} / {{item.desc}}
 </div>

如何从第一个控制器的项目列表中查找第二个控制器的ng-repeat中的项目desc？

Answer 1

您可以尝试使用继承概念：

var app = angular.module(....);

app.controller('FirstCtrl ', function($scope) {
  $scope.items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];
});

app.controller('SecondCtrl', function($scope, $controller) {
  $controller('FirstCtrl', {$scope: $scope}); // $scope.items now available

});

优于$ rootScope解决方案：

第二个控制器将始终可以访问items，即使第一个控制器未实例化
items数组只能由这两个控制器更改，而不是其他任何人

这种方法的主要缺陷是SecondCtrl可以访问FirstCtrl的任何范围变量，而不仅仅是items数组

编辑。 @NexusDuck提到的恕我直言工厂/服务方法是最好的（组合而不是继承）。

Answer 2

控制器之间共享数据最好通过服务/工厂实现，另一种方法是使用范围继承。

1。工厂/服务

angular.module('yourModule').factory('itemService', itemService);

    function itemService() {
         var items =  [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];
         return {
             findItemById: findItemById
         }

        function findItemById(id) {
            //logic to find item by id
        }
    }

在控制器中注入此工厂，并根据需要添加更多功能。

2。范围继承

这里的关键是嵌套你的childcontroller，我认为它是带有id的那个。

<div ng-controller="topCtrl">
   <div ng-controller="childCtrl">
      <div ng-repeat="item in myitems">
         {{item.id}} / {{item.desc}}
      </div>

   </div>
</div>

使用此选项，嵌套在视图中topCtrl中的任何控制器都可以访问topCtrl范围的变量。

第三种选择是将数据存储在$ rootScope中，这实际上也是一种范围继承（除了孤立的指令范围继承自rootScope之外的所有范围），但这可能不太好你的用例的想法。

Answer 3

您可以在第一个控制器中为$ rootScope.items指定值，然后尝试在第二个控制器中访问。

Answer 4

您可以使用$ emit和$ on。

EX：在第一个控制器中添加

$scope.$emit('eventName', $scope.items);
};

并传递$ scope.items。

在第二个控制器中添加

$scope.$on('eventName', function (event, args) {
    $scope.items = args;
});

args保存$ scope.items值，并在第二个控件中分配给$ scope.items，所以现在ng-repeat显示第一个控制器的$ scope.items值。

如何在AngularJS中从另一个控制器查找具有id的项目

4 个答案:

1。工厂/服务

2。范围继承