คอนโทรลเลอร์ AngularJS สามารถสืบทอดจากคอนโทรลเลอร์อื่นในโมดูลเดียวกันได้หรือไม่?

ภายในโมดูลคอนโทรลเลอร์สามารถสืบทอดคุณสมบัติจากคอนโทรลเลอร์ภายนอก:

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

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

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

ตัวอย่างผ่าน: Dead link : 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.invokeParentCtrl

ใช่สามารถทำได้ แต่คุณต้องใช้$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("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 () และยังคงใช้คอนโทรลเลอร์ "เป็น" ไวยากรณ์

ประการแรกใช้ไวยากรณ์ "เป็น" เมื่อคุณสืบทอดการเรียก $ 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.เพื่อเรียกคืน

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

ฉันทำอย่างนี้ในอีกทางหนึ่ง ในกรณีของฉันฉันต้องการฟังก์ชั่นที่ใช้ฟังก์ชั่นและคุณสมบัติเดียวกันกับคอนโทรลเลอร์อื่น ๆ ฉันชอบมันยกเว้นพารามิเตอร์ ด้วยวิธีนี้ ChildCtrl ทั้งหมดของคุณต้องได้รับ $ 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;
  };
});

เคล็ดลับคือการใช้ตัวควบคุมที่มีชื่อแทนที่จะกำหนดไว้ในคำจำกัดความของส่วนประกอบ

ตามที่ระบุไว้ในคำตอบที่ยอมรับคุณสามารถ "สืบทอด" การแก้ไขตัวควบคุมหลักของ $ scope และบริการอื่น ๆ โดยการโทร: $controller('ParentCtrl', {$scope: $scope, etc: etc});ในตัวควบคุมลูกของคุณ

อย่างไรก็ตามสิ่งนี้จะล้มเหลวหากคุณคุ้นเคยกับการใช้ตัวควบคุม 'เป็น' ไวยากรณ์เช่นใน

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

หมายเหตุ:จากนั้นคุณต้องลบส่วน 'as' ออกจากng-controller=เนื่องจากคุณกำลังระบุชื่ออินสแตนซ์ในรหัสและไม่ต้องใช้แม่แบบอีกต่อไป

ฉันใช้ไวยากรณ์ "Controller as" กับ vm = thisและต้องการสืบทอดคอนโทรลเลอร์ ฉันมีปัญหาถ้าตัวควบคุมหลักของฉันมีฟังก์ชันที่แก้ไขตัวแปร

การใช้คำตอบของ IProblemFactoryและSalman Abbasฉันได้ทำสิ่งต่อไปนี้เพื่อเข้าถึงตัวแปรพาเรนต์:

(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 อย่างง่าย อย่าลืมให้บริการเชิงมุมที่จำเป็นเพื่อเรียกใช้วิธีการโทร

//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 กลัว

ควบคุมมรดกใน angularjs