我有两个Angular控制器:
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我不能在Ctrl2中使用Ctrl1,因为它是未定义的。然而,如果我试图像这样传递它。
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我得到一个错误。有人知道怎么做吗?
做
Ctrl2.prototype = new Ctrl1();
也失败了。
注意:这些控制器彼此之间不是嵌套的。
我想通过指出在控制器之间甚至指令之间共享数据的推荐方式是使用服务(工厂)来回答这个问题,正如已经指出的那样,但我也想提供一个工作的实际示例,说明应该如何做到这一点。
下面是工作活塞:http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info
首先,创建你的服务,它将有你的共享数据:
app.factory('SharedService', function() {
return {
sharedObject: {
value: '',
value2: ''
}
};
});
然后,简单地将它注入到你的控制器上,并在你的作用域上获取共享数据:
app.controller('FirstCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
app.controller('SecondCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
app.controller('MainCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
你也可以为你的指令这样做,它的工作方式是一样的:
app.directive('myDirective',['SharedService', function(SharedService){
return{
restrict: 'E',
link: function(scope){
scope.model = SharedService.sharedObject;
},
template: '<div><input type="text" ng-model="model.value"/></div>'
}
}]);
希望这个实用而干净的答案能对别人有所帮助。
我看了上面的答案,我推荐pejman在16年12月29日13:31的建议,但他/她没有留下完整的答案。在这里,我将把它写为——>(你需要一个服务和一个监听器$watch在控制器的一个作用域上用于服务区域的变化)
var app =
angular.module('myApp', ['ngRoute', 'ngSanitize']);
app.service('bridgeService', function () {
var msg = "";
return msg;
});
app.controller('CTRL_1'
, function ($scope, $http, bridgeService)
{
$http.get(_restApi, config)
.success(
function (serverdata, status, config) {
$scope.scope1Box = bridgeService.msg = serverdata;
});
});
app.controller('CTRL_2'
, function ($scope, $http, bridgeService)
{
$scope.$watch( function () {
return (bridgeService.msg);
}, function (newVal, oldVal) {
$scope.scope2Box = newVal;
}, true
);
});