モジュール内では、コントローラは外部コントローラからプロパティを継承できます。
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
への参照が見つからないため、2番目のコードは機能しません。
はい、できますが、代わりに$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
});
あなたが vm
controller syntax を使っているのであれば、これが私の解決策です:
.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}));
})
残念ながら、$controller.call(vm, 'BaseGenericCtrl'...)
を使用して現在のコンテキストをクロージャ(reload()
)関数に渡すことはできません。したがって、動的にコンテキストを変更するために継承された関数内でthis
を使用することが唯一の解決策です。
両方のコントローラにアクセス可能な機能やデータを提供するには、ファクトリまたはサービスを使用する必要があります。
これは似たような質問です--- --- AngularJSコントローラの継承
この回答はgmontagueで で発生した問題に答えて、私は$ controller()を使用してコントローラを継承し、それでもコントローラの "as"構文を使用するメソッドを見つけました。
まず、$ controller()の呼び出しを継承するときは "as"構文を使います。
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によって定義されている場合は、parent.
を使用してparentから継承されたプロパティを取得します。子によって定義されている場合は、それを取得するためにchild.
を使用します。
<div ng-controller="ChildCtrl as child">{{ parent.foo }}</div>
まあ、私はこれを別の方法でやった。私の場合は、他のコントローラにも同じ機能とプロパティを適用する機能が必要でした。パラメータ以外は好きでした。このように、あなたのすべての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();
});
不思議に思う人は、受け入れられた答えの方法を使って、同じ方法でコンポーネントコントローラを拡張することができます。
以下の方法を使用してください。
親コンポーネント(拡張元):
/**
* 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;
};
});
コツは、コンポーネント定義で定義するのではなく、名前付きコントローラを使用することです。
受け入れられた答えで述べられているように、あなたはあなたの子コントローラで$controller('ParentCtrl', {$scope: $scope, etc: etc});
を呼び出すことによって$ scopeと他のサービスへの親コントローラの修正を「継承」することができます。
しかし、これを使うのに慣れていないなら、これは失敗します。例えば、
<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'部分を削除します。これは、コードでインスタンス名を指定しているためで、テンプレートではなくなったためです。
vm = this
で "Controller as"構文を使用していて、コントローラを継承したいと思いました。親コントローラに変数を変更する関数があると問題がありました。
IProblemFactory および 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>
単純な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);
AngularJs inheritences feartueについては、下記のリンクを参照してください。