javascript - 使用自定义 Controller 在不同 View 中共享范围

Question

我遇到了下一个问题，我想找到解决方案，或者我是否应该像现在这样这样做。

我有以下 ui-router 配置:

$stateProvider.state('ListCounterparties', {
    url:"/counterparties",
    data: { NavMenuItem : 'Counterparties / Desks' },
    views: {
        '' : {
            templateUrl:"./app/module_Counterparties/templates/ListCounterparties.html",
            controller:"CounterpartiesControllerCtrl"
        },
        'deskLists@ListCounterparties' : {
            templateUrl : './app/module_Counterparties/templates/DesksDualListTemplate.html',
            controller:'DesksControllerCtrl'
        }
}

第一个未命名的 View 有一个表，我可以从中选择一行，然后将调用一个方法从第二个 View 填充双重列表。

到目前为止，我一直在同一个 Controller 中使用这两个 Controller ，但是 Controller 变得太大了，我决定必须将它们分开。

填充“deskLists@ListCounterparties”中的双重列表的方法在 DesksControllerCtrl 中定义，但应在 CounterpartiesControllerCtrl 中调用，因为行选择事件在该 Controller 中。

问题是范围不共享，未命名 View 无法访问该方法。

访问 DesksControllerCtrl 中的范围 我可以看到访问 $parent 属性两次我可以访问 CounterpartiesControllerCtrl，但我不认为这是理想的事情做。

提前致谢。

Answer 1

在多个 Controller 之间共享数据、方法等，Angular 方式将是创建服务。这意味着，您创建例如一个保存所有数据的服务，另一个为多个 Controller 提供功能。然后，只需将它们注入(inject)到您的 Controller 中:

var myApp = angular.module('myApp', []);

myApp.factory('myGlobalData', function() {
  return {
    data: 1
  };
});

myApp.factory('myService', function(myGlobalData) {
  return {
    increment: function() {
      myGlobalData.data++;
    }
  };
});

myApp.controller('MyCtrlA', function($scope, myGlobalData, myService) {
  $scope.myGlobalData = myGlobalData;
  $scope.myService = myService;
});

myApp.controller('MyCtrlB', function($scope, myGlobalData, myService) {
  $scope.myGlobalData = myGlobalData;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

  <p ng-controller="MyCtrlA">
    {{myGlobalData.data}}
  </p>

  <p ng-controller="MyCtrlB">
    {{myGlobalData.data}}
  </p>

  <div ng-controller="MyCtrlA">
    <button ng-click="myService.increment()">Increment data in myGlobalData service</button>
  </div>

</div>