我有两个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();
也失败了。
注意:这些控制器彼此之间不是嵌套的。
当前回答
不创建服务的解决方案，使用$rootScope:
要跨应用控制器共享属性，你可以使用Angular $rootScope。这是共享数据的另一种选择，让人们知道它。
在控制器之间共享一些功能的首选方式是服务，读取或更改全局属性可以使用$rootscope。
var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = true;
}]);
app.controller('Ctrl2', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = false;
}]);
在模板中使用$rootScope(使用$root访问属性):
<div ng-controller="Ctrl1">
<div class="banner" ng-show="$root.showBanner"> </div>
</div>
其他回答
跨多个控制器共享变量的一种方法是创建一个服务，并将其注入到您想要使用它的任何控制器中。
简单的服务示例:
angular.module('myApp', [])
.service('sharedProperties', function () {
var property = 'First';
return {
getProperty: function () {
return property;
},
setProperty: function(value) {
property = value;
}
};
});
在控制器中使用服务:
function Ctrl2($scope, sharedProperties) {
$scope.prop2 = "Second";
$scope.both = sharedProperties.getProperty() + $scope.prop2;
}
这在本博客中有很好的描述(特别是第2课)。
我发现，如果你想跨多个控制器绑定到这些属性，如果你绑定到一个对象的属性而不是一个基本类型(布尔值，字符串，数字)来保留绑定引用，效果会更好。
示例:var property = {Property1: 'First'};而不是var property = 'First';。
更新:(希望)让事情更清楚这里是一个小提琴，显示了一个例子:
绑定到共享值的静态副本(在myController1中) 绑定到原语(字符串) 绑定到对象的属性(保存到作用域变量) 绑定到共享值，当值更新时更新UI(在myController2中) 绑定到返回原语(字符串)的函数 绑定到对象的属性 对对象属性的双向绑定
如果你不想做服务，你可以这样做。
var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;
我想通过指出在控制器之间甚至指令之间共享数据的推荐方式是使用服务(工厂)来回答这个问题，正如已经指出的那样，但我也想提供一个工作的实际示例，说明应该如何做到这一点。
下面是工作活塞: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>'
}
}]);
希望这个实用而干净的答案能对别人有所帮助。
我喜欢用简单的例子来说明简单的事情:)
下面是一个非常简单的服务示例:
angular.module('toDo',[])
.service('dataService', function() {
// private variable
var _dataObj = {};
// public API
this.dataObj = _dataObj;
})
.controller('One', function($scope, dataService) {
$scope.data = dataService.dataObj;
})
.controller('Two', function($scope, dataService) {
$scope.data = dataService.dataObj;
});
这里是jsbin
这里有一个非常简单的Factory示例:
angular.module('toDo',[])
.factory('dataService', function() {
// private variable
var _dataObj = {};
// public API
return {
dataObj: _dataObj
};
})
.controller('One', function($scope, dataService) {
$scope.data = dataService.dataObj;
})
.controller('Two', function($scope, dataService) {
$scope.data = dataService.dataObj;
});
这里是jsbin
如果这太简单了，这里有一个更复杂的例子
也可以在这里查看相关的最佳实践评论
难道不能让属性也成为作用域父对象的一部分吗?
$scope.$parent.property = somevalue;
我不是说它是对的，但它确实有效。
