javascript – 使用自定义控制器在不同视图中共享范围

前端之家收集整理的这篇文章主要介绍了javascript – 使用自定义控制器在不同视图中共享范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有下一个问题,我想找到一个解决方案,或者我是否应该像我一样这样做.

我有以下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'
        }
}

第一个未命名的视图有一个表,我可以从中选择一行,然后调用一个方法从第二个视图填充双列表.

到目前为止,我已经在同一个控制器中,但控制器变得太大,我决定我必须将它们分开.

在’deskLists @ ListCounterparties’中填充双列表的方法在DesksControllerCtrl中定义,但它应该在CounterpartiesControllerCtrl中调用,因为行选择的事件在该控制器中.

问题是范围不共享,并且该方法对于未命名的视图是不可访问的.

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

提前致谢.

最佳答案
在多个控制器之间共享数据,方法等Angular方式将是创建服务.这意味着,您创建了例如保存所有数据的服务,另一个为多个控制器提供功能的服务.然后,只需将它们注入控制器:

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',myService) {
  $scope.myGlobalData = myGlobalData;
});

猜你在找的JavaScript相关文章