我遇到了下一个问题,我想找到一个解决方案,或者我是否应该这样做。
我有以下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 ,但我不会超过这个&#39这是理想的事情。
提前致谢。
答案 0 :(得分:3)
在多个控制器之间共享数据,方法等 Angular方式将创建服务。这意味着,您创建了例如一个服务,它包含所有数据,另一个提供多个控制器的功能。然后,只需在控制器中inject
:
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>
&#13;