有人可以提供 AngularJS 中 $controller 服务的用例吗?
Can someone provide a use case for the $controller service in AngularJS?
Angularjs 文档给出了 $controller 服务的用法:
$controller(constructor, locals);
谁能把重点放在这两点上:
- 何时使用 $controller 服务。请提供一些用例。
- 有关传递给它的 'locals' 参数的详细信息。
举一个例子,它在单元测试期间创建目标控制器时很有用。
假设您有一个签名为 .controller('MainCtrl', function($scope, serviceA){..})
的控制器。
测试中,
// ...
beforeEach(inject(function ($rootScope, $controller, serviceA) {
// assign injected values to test module variables
scope = $rootScope.$new();
service = serviceA
// create the controller, by passing test module variables values as dependencies
$controller('MainCtrl', {'$scope': scope, 'serviceA': service});
}));
it('test on controller', function() {
//...
});
您可以将要在 $scope 上执行的通用函数创建到一个可以命名为 'CommonCtrl'
的控制器中。
angular.module('app',[]).controller('CommonCtrl', ['$scope', function($scope){
var self = this;
$scope.stuff1 = function(){
}
$scope.stuff2 = function(){
}
self.doCommonStuff = function(){
// common stuff here
$scope.stuff1();
$scope.stuff2();
};
return self;
}]);
然后在其他控制器中注入这个控制器让我们说 'TestCtrl1' 就像
angular.module('app',[]).controller('TestCtrl1', ['$scope','$controller', function($scope, $controller){
var commonCtrl = $controller('CommonCtrl',{$scope: $scope}); // passing current scope to commmon controller
commonCtrl.doCommonStuff();
}]);
在这里,$controller 服务的第二个参数,我们正在传递 CommonCtrl 所需的依赖项。所以 doCommonStuff 方法将使用 TestCtrl1 控制器的范围。
您也可以使用该服务实现控制器继承。
angular.module('app',[]).controller('BaseCtrl', ['$scope', function($scope){
$scope.action1 = function(){
console.log('In BaseCtrl action1');
}
$scope.action2 = function(){
console.log('In BaseCtrl action2');
}
}]);
angular.module('app').controller('ChildCtrl', ['$scope', function($scope){
angular.extend(this, $controller('BaseCtrl', {
$scope: $scope
}));
$scope.action1 = function(){
console.log('Overridden in ChildCtrl action1');
}
$scope.action2 = function(){
console.log('Overridden in ChildCtrl action2');
}
}]);
Angularjs 文档给出了 $controller 服务的用法:
$controller(constructor, locals);
谁能把重点放在这两点上:
- 何时使用 $controller 服务。请提供一些用例。
- 有关传递给它的 'locals' 参数的详细信息。
举一个例子,它在单元测试期间创建目标控制器时很有用。
假设您有一个签名为 .controller('MainCtrl', function($scope, serviceA){..})
的控制器。
测试中,
// ...
beforeEach(inject(function ($rootScope, $controller, serviceA) {
// assign injected values to test module variables
scope = $rootScope.$new();
service = serviceA
// create the controller, by passing test module variables values as dependencies
$controller('MainCtrl', {'$scope': scope, 'serviceA': service});
}));
it('test on controller', function() {
//...
});
您可以将要在 $scope 上执行的通用函数创建到一个可以命名为 'CommonCtrl'
的控制器中。
angular.module('app',[]).controller('CommonCtrl', ['$scope', function($scope){
var self = this;
$scope.stuff1 = function(){
}
$scope.stuff2 = function(){
}
self.doCommonStuff = function(){
// common stuff here
$scope.stuff1();
$scope.stuff2();
};
return self;
}]);
然后在其他控制器中注入这个控制器让我们说 'TestCtrl1' 就像
angular.module('app',[]).controller('TestCtrl1', ['$scope','$controller', function($scope, $controller){
var commonCtrl = $controller('CommonCtrl',{$scope: $scope}); // passing current scope to commmon controller
commonCtrl.doCommonStuff();
}]);
在这里,$controller 服务的第二个参数,我们正在传递 CommonCtrl 所需的依赖项。所以 doCommonStuff 方法将使用 TestCtrl1 控制器的范围。
您也可以使用该服务实现控制器继承。
angular.module('app',[]).controller('BaseCtrl', ['$scope', function($scope){
$scope.action1 = function(){
console.log('In BaseCtrl action1');
}
$scope.action2 = function(){
console.log('In BaseCtrl action2');
}
}]);
angular.module('app').controller('ChildCtrl', ['$scope', function($scope){
angular.extend(this, $controller('BaseCtrl', {
$scope: $scope
}));
$scope.action1 = function(){
console.log('Overridden in ChildCtrl action1');
}
$scope.action2 = function(){
console.log('Overridden in ChildCtrl action2');
}
}]);