在模块中,控制器可以从外部控制器继承属性:
var app = angular.module('angularjs-starter', []);
var ParentCtrl = function ($scope, $location) {
};
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope});
});
示例来自:死链接: http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html
模块内的控制器是否也可以继承兄弟姐妹?
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function($scope) {
//I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope}); //This does not work
});
第二个代码不起作用,因为$injector.invoke
需要一个函数作为第一个参数,但找不到对ParentCtrl
的引用。
答案 0 :(得分:286)
是的,它可以,但您必须使用$controller
服务来实例化控制器: -
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl', function($scope) {
// I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $controller) {
$controller('ParentCtrl', {$scope: $scope}); //This works
});
答案 1 :(得分:19)
如果您使用vm
controller syntax,这是我的解决方案:
table(dat$birthCountry)
不幸的是,你不能使用.controller("BaseGenericCtrl", function ($scope) {
var vm = this;
vm.reload = reload;
vm.items = [];
function reload() {
// this function will come from child controller scope - RESTDataService.getItemsA
this.getItems();
}
})
.controller("ChildCtrl", function ($scope, $controller, RESTDataService) {
var vm = this;
vm.getItems = RESTDataService.getItemsA;
angular.extend(vm, $controller('BaseGenericCtrl', {$scope: $scope}));
})
来将当前上下文传递给闭包(for $controller.call(vm, 'BaseGenericCtrl'...)
)函数,因此只有一个解决方案是在继承函数中使用reload()
为了动态改变上下文。
答案 2 :(得分:8)
我认为,您应该使用工厂或服务,为两个控制器提供可访问的功能或数据。
这里是类似的问题---> AngularJS controller inheritance
答案 3 :(得分:7)
为了回应this answer by gmontague中提出的问题,我找到了一种使用$ controller()继承控制器的方法,并且仍然使用控制器"作为"句法。
首先,使用"作为"继承调用$ controller()时的语法:
app.controller('ParentCtrl', function(etc...) {
this.foo = 'bar';
});
app.controller('ChildCtrl', function($scope, $controller, etc...) {
var ctrl = $controller('ParentCtrl as parent', {etc: etc, ...});
angular.extend(this, ctrl);
});
然后,在HTML模板中,如果属性由父级定义,则使用parent.
检索从父级继承的属性;如果由child定义,则使用child.
来检索它。
<div ng-controller="ChildCtrl as child">{{ parent.foo }}</div>
答案 4 :(得分:5)
好吧,我是用另一种方式做到的。在我的情况下,我想要一个在其他控制器中应用相同功能和属性的功能。我喜欢它,除了参数。这样,你所有的ChildCtrls都需要获得$ location。
var app = angular.module('angularjs-starter', []);
function BaseCtrl ($scope, $location) {
$scope.myProp = 'Foo';
$scope.myMethod = function bar(){ /* do magic */ };
}
app.controller('ChildCtrl', function($scope, $location) {
BaseCtrl.call(this, $scope, $location);
// it works
$scope.myMethod();
});
答案 5 :(得分:3)
对于那些想知道的人,您可以使用接受的答案中的方法以相同的方式扩展组件控制器。
使用以下方法:
父组件(从中扩展):
/**
* Module definition and dependencies
*/
angular.module('App.Parent', [])
/**
* Component
*/
.component('parent', {
templateUrl: 'parent.html',
controller: 'ParentCtrl',
})
/**
* Controller
*/
.controller('ParentCtrl', function($parentDep) {
//Get controller
const $ctrl = this;
/**
* On init
*/
this.$onInit = function() {
//Do stuff
this.something = true;
};
});
子组件(扩展的组件):
/**
* Module definition and dependencies
*/
angular.module('App.Child', [])
/**
* Component
*/
.component('child', {
templateUrl: 'child.html',
controller: 'ChildCtrl',
})
/**
* Controller
*/
.controller('ChildCtrl', function($controller) {
//Get controllers
const $ctrl = this;
const $base = $controller('ParentCtrl', {});
//NOTE: no need to pass $parentDep in here, it is resolved automatically
//if it's a global service/dependency
//Extend
angular.extend($ctrl, $base);
/**
* On init
*/
this.$onInit = function() {
//Call parent init
$base.$onInit.call(this);
//Do other stuff
this.somethingElse = true;
};
});
技巧是使用命名控制器,而不是在组件定义中定义它们。
答案 6 :(得分:2)
如接受的答案中所述,您可以通过在子控制器中调用$controller('ParentCtrl', {$scope: $scope, etc: etc});
来“继承”父控制器对$ scope和其他服务的修改。
然而,如果您习惯使用控制器'as'语法,则会失败,例如在
中<div ng-controller="ChildCtrl as child">{{ child.foo }}</div>
如果在父控制器中设置foo
(通过this.foo = ...
),子控制器将无法访问它。
如评论中所述,您可以将$ controller的结果直接分配给范围:
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function(etc...) {
this.foo = 'bar';
});
app.controller('ChildCtrl', function($scope, $controller, etc...) {
var inst = $controller('ParentCtrl', {etc: etc, ...});
// Perform extensions to inst
inst.baz = inst.foo + " extended";
// Attach to the scope
$scope.child = inst;
});
注意:然后必须从ng-controller=
删除'as'部分,因为您在代码中指定了实例名称,而不再是模板。
答案 7 :(得分:2)
我在vm = this
使用“Controller as”语法,并希望继承控制器。如果我的父控制器有一个修改变量的函数,我就遇到了问题。
使用IProblemFactory's和Salman Abbas's答案,我执行了以下操作来访问父变量:
(function () {
'use strict';
angular
.module('MyApp',[])
.controller('AbstractController', AbstractController)
.controller('ChildController', ChildController);
function AbstractController(child) {
var vm = child;
vm.foo = 0;
vm.addToFoo = function() {
vm.foo+=1;
}
};
function ChildController($controller) {
var vm = this;
angular.extend(vm, $controller('AbstractController', {child: vm}));
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="ChildController as childCtrl" layout="column" ng-cloak="" ng-app="MyApp">
<button type="button" ng-click="childCtrl.addToFoo()">
add
</button>
<span>
-- {{childCtrl.foo}} --
</span>
</div>
答案 8 :(得分:0)
您可以使用简单的JavaScript继承机制。另外,不要忘记传递一个必要的角度服务来调用.call方法。
//simple function (js class)
function baseCtrl($http, $scope, $location, $rootScope, $routeParams, $log, $timeout, $window, modalService) {//any serrvices and your 2
this.id = $routeParams.id;
$scope.id = this.id;
this.someFunc = function(){
$http.get("url?id="+this.id)
.then(success function(response){
....
} )
}
...
}
angular
.module('app')
.controller('childCtrl', childCtrl);
//angular controller function
function childCtrl($http, $scope, $location, $rootScope, $routeParams, $log, $timeout, $window, modalService) {
var ctrl = this;
baseCtrl.call(this, $http, $scope, $location, $rootScope, $routeParams, $log, $timeout, $window, modalService);
var idCopy = ctrl.id;
if($scope.id == ctrl.id){//just for sample
ctrl.someFunc();
}
}
//also you can copy prototype of the base controller
childCtrl.prototype = Object.create(baseCtrl.prototype);
答案 9 :(得分:0)
请参阅下面提到的AngularJs继承feartue的链接。