我有两个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和services，还有一个干净简单的解决方案来扩展angular来添加共享数据:
在控制器中:
angular.sharedProperties = angular.sharedProperties
|| angular.extend(the-properties-objects);
该属性属于'angular'对象，与作用域分离，可以在作用域和服务中共享。
它的一个好处是你不需要注入对象:它们可以在你定义后的任何地方立即访问!
其他回答
跨多个控制器共享变量的一种方法是创建一个服务，并将其注入到您想要使用它的任何控制器中。
简单的服务示例:
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中) 绑定到返回原语(字符串)的函数 绑定到对象的属性 对对象属性的双向绑定
我喜欢用简单的例子来说明简单的事情:)
下面是一个非常简单的服务示例:
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
如果这太简单了，这里有一个更复杂的例子
也可以在这里查看相关的最佳实践评论
下面的例子展示了如何在兄弟控制器之间传递变量，并在值发生变化时采取行动。
用例示例:在侧栏中有一个过滤器，可以更改另一个视图的内容。
angular.module('myApp', []) .factory('MyService', function() { // private var value = 0; // public return { getValue: function() { return value; }, setValue: function(val) { value = val; } }; }) .controller('Ctrl1', function($scope, $rootScope, MyService) { $scope.update = function() { MyService.setValue($scope.value); $rootScope.$broadcast('increment-value-event'); }; }) .controller('Ctrl2', function($scope, MyService) { $scope.value = MyService.getValue(); $scope.$on('increment-value-event', function() { $scope.value = MyService.getValue(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <h3>Controller 1 Scope</h3> <div ng-controller="Ctrl1"> <input type="text" ng-model="value"/> <button ng-click="update()">Update</button> </div> <hr> <h3>Controller 2 Scope</h3> <div ng-controller="Ctrl2"> Value: {{ value }} </div> </div>
除了$rootScope和services，还有一个干净简单的解决方案来扩展angular来添加共享数据:
在控制器中:
angular.sharedProperties = angular.sharedProperties
|| angular.extend(the-properties-objects);
该属性属于'angular'对象，与作用域分离，可以在作用域和服务中共享。
它的一个好处是你不需要注入对象:它们可以在你定义后的任何地方立即访问!
第二种方法:
angular.module('myApp', [])
.controller('Ctrl1', ['$scope',
function($scope) {
$scope.prop1 = "First";
$scope.clickFunction = function() {
$scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
};
}
])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.prop2 = "Second";
$scope.$on("update_Ctrl2_controller", function(event, prop) {
$scope.prop = prop;
$scope.both = prop + $scope.prop2;
});
}
])
Html:
<div ng-controller="Ctrl2">
<p>{{both}}</p>
</div>
<button ng-click="clickFunction()">Click</button>
欲了解更多细节，请参阅plunker:
http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview
