Un contrôleur AngularJS peut-il hériter d'un autre contrôleur du même module?

Au sein d'un module, un contrôleur peut hériter des propriétés d'un contrôleur externe:

var app = angular.module('angularjs-starter', []);

var ParentCtrl = function ($scope, $location) {
};

app.controller('ChildCtrl', function($scope, $injector) {
  $injector.invoke(ParentCtrl, this, {$scope: $scope});
});

Exemple via: Lien mort : http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html

Un contrôleur à l'intérieur d'un module peut-il également hériter d'un frère?

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
});

Le second code ne fonctionne pas car $injector.invokenécessite une fonction comme premier paramètre et ne trouve pas la référence à ParentCtrl.

Oui, cela peut mais vous devez utiliser le $controllerservice pour instancier le contrôleur à la place: -

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
});

Dans le cas où vous utilisez la vmsyntaxe du contrôleur , voici ma solution:

.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}));
})

Malheureusement, vous ne pouvez pas utiliser $controller.call(vm, 'BaseGenericCtrl'...), pour passer le contexte actuel dans la fonction de fermeture (pour reload()), donc une seule solution est d'utiliser la thisfonction héritée à l'intérieur afin de changer dynamiquement le contexte.

Je pense que vous devriez utiliser l'usine ou le service pour donner des fonctions ou des données accessibles aux deux contrôleurs.

voici une question similaire ---> Héritage du contrôleur AngularJS

En réponse au problème soulevé dans cette réponse par gmontague , j'ai trouvé une méthode pour hériter d'un contrôleur en utilisant $ controller (), et toujours utiliser la syntaxe du contrôleur "as".

Tout d'abord, utilisez la syntaxe "as" lorsque vous héritez de l'appel de $ 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);

    });

Ensuite, dans le modèle HTML, si la propriété est définie par le parent, utilisez-la parent.pour récupérer les propriétés héritées du parent; s'il est défini par l'enfant, utilisez-le child.pour le récupérer.

    <div ng-controller="ChildCtrl as child">{{ parent.foo }}</div>

Eh bien, je l'ai fait d'une autre manière. Dans mon cas, je voulais une fonction qui applique les mêmes fonctions et propriétés dans d'autres contrôleurs. Je l'ai aimé, sauf par paramètres. De cette façon, tous vos ChildCtrls doivent recevoir $ 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();
});

Pour ceux qui se demandent, vous pouvez étendre les contrôleurs de composants de la même manière, en utilisant la méthode dans la réponse acceptée.

Utilisez l'approche suivante:

Composant parent (à partir duquel):

/**
 * 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;
  };
});

Composant enfant (celui qui s'étend):

/**
 * 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;
  };
});

L'astuce consiste à utiliser des contrôleurs nommés, au lieu de les définir dans la définition du composant.

Comme mentionné dans la réponse acceptée, vous pouvez "hériter" des modifications d'un contrôleur parent sur $ scope et d'autres services en appelant: $controller('ParentCtrl', {$scope: $scope, etc: etc});dans votre contrôleur enfant.

Cependant , cela échoue si vous êtes habitué à utiliser la syntaxe du contrôleur «as», par exemple dans

<div ng-controller="ChildCtrl as child">{{ child.foo }}</div>

Si a fooété défini dans le contrôleur parent (via this.foo = ...), le contrôleur enfant n'y aura pas accès.

Comme mentionné dans les commentaires, vous pouvez affecter le résultat de $ controller directement à la portée:

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;
});

Remarque: Vous devez ensuite supprimer la partie «en tant que» deng-controller= , car vous spécifiez le nom de l'instance dans le code et non plus le modèle.

J'utilisais la syntaxe "Controller as" avec vm = this et voulais hériter d'un contrôleur. J'ai eu des problèmes si mon contrôleur parent avait une fonction qui modifiait une variable.

En utilisant les réponses d'IProblemFactory et de Salman Abbas , j'ai fait ce qui suit pour avoir accès aux variables parents:

(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>

Vous pouvez utiliser un mécanisme d'héritage JavaScript simple. N'oubliez pas non plus de passer un service angulaire nécessaire pour invoquer la méthode .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);

Reportez-vous au lien mentionné ci-dessous pour les héritages AngularJs.

Controller-Inheritance-in-angularjs