我有两个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();
也失败了。
注意:这些控制器彼此之间不是嵌套的。
当前回答
下面的例子展示了如何在兄弟控制器之间传递变量，并在值发生变化时采取行动。
用例示例:在侧栏中有一个过滤器，可以更改另一个视图的内容。
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>
其他回答
我喜欢用简单的例子来说明简单的事情:)
下面是一个非常简单的服务示例:
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
如果这太简单了，这里有一个更复杂的例子
也可以在这里查看相关的最佳实践评论
除了$rootScope和services，还有一个干净简单的解决方案来扩展angular来添加共享数据:
在控制器中:
angular.sharedProperties = angular.sharedProperties
|| angular.extend(the-properties-objects);
该属性属于'angular'对象，与作用域分离，可以在作用域和服务中共享。
它的一个好处是你不需要注入对象:它们可以在你定义后的任何地方立即访问!
你可以在服务业或工厂里这样做。除了一些核心差异外，它们本质上是一样的。我在thinkster上找到了这个解释。IO是最容易遵循的。简单、扼要、有效。
我倾向于使用价值观，乐意任何人讨论为什么这是一个坏主意。
var myApp = angular.module('myApp', []);
myApp.value('sharedProperties', {}); //set to empty object -
然后按服务注入值。
在ctrl1中设置:
myApp.controller('ctrl1', function DemoController(sharedProperties) {
sharedProperties.carModel = "Galaxy";
sharedProperties.carMake = "Ford";
});
从ctrl2访问:
myApp.controller('ctrl2', function DemoController(sharedProperties) {
this.car = sharedProperties.carModel + sharedProperties.carMake;
});
有两种方法
1)使用get/set服务
2) 美元的范围。$emit('key'， {data: value});//设置该值
$rootScope.$on('key', function (event, data) {}); // to get the value
