지시어 컨트롤러 상속 또는 공유

Question

두 개의 지시문 : A와 B가 있습니다. 이들은 매우 유사합니다. 지시문 B가 지시문 A에서 제어기를 상속 받기를 원합니다.

즉, A의 지시문 정의 객체에서 controller:에 사용 된 동일한 함수는 B의 지시문 정의 객체에서 사용되는 controller: 함수 여야합니다.

controller: 함수의 복사/붙여 넣기 이외에도 A와 B의 정의에서 동일한 함수를 어떻게 사용합니까?

Answer 1

내가 올바르게 이해한다면 컨트롤러를 상속하고 싶지는 않습니다. 2 개의 서로 다른 지시어에서 하나의 컨트롤러를 사용하고자합니다. 이 경우 컨트롤러 함수를 선언하고 지시문 정의 객체에 함수 또는 문자열로 전달하십시오.

이 컨트롤러가 어떤 이름으로 범위에 노출 controllerAs 구문, 작동

function BaseController(){ 
    this.commonFunct = function(){ 
     ... 
    } 
} 

function CtrlA(){ 
} 
CtrlA.prototype = BaseController 

function CtrlB(){ 
} 
CtrlB.prototype = BaseController 

이 ctrl 말 :

Answer 2

컨트롤러는 프로토 타입을 사용할 수 있습니다, 그냥 평범한 JS 기능, 그래서. 그런 다음 $scope.ctrl.commonFunct (더 일반적인, 컨트롤러의 모든 장소에서 작동) 또는 this.commonFunct (컨트롤러의 인스턴스 메소드에서 사용할 수 있습니다. 여기서 this은 컨트롤러 임)를 사용하여 함수를 참조 할 수 있습니다.

하나의 모듈에 두 컨트롤러를 명명 된 함수로 선언하면 작동합니다. 그들은 다른 모듈에 선언하는 경우 $controller과 믹스 인과 같은 방법을 사용할 수 있습니다

// Base module 
(function() { 
    'use strict'; 

    angular.module('Base', []); 

    function BaseController($scope, <injectables>, that) { 
    that.commonFunct = function() { 
    }; 
    } 

    angular.module('Base').controller('BaseController', 
    ['$scope', '...', BaseController]); 
})(); 

// Module that inherits functionality 
(function() { 
    'use strict'; 

    angular.module('Derived', ['Base']); 

    function DerivedController($scope, $controller, ...) { 
    $controller('BaseController', { 
     '$scope' : $scope, 
     ... 
     'that' : this 
    }); 

    // this.commonFunct is available 
    } 

    angular.module('Derived').controller('DerivedController', 
    ['$scope', '$controller', '...', DerivedController]); 
})(); 

MHO을 : 나는 자연 그대로 컨트롤러/서비스 및 지침의 선언에 이름이 지정된 함수를 사용하는 것이 좋습니다, 일을 JS 방법을 소지품. 또한 controllerAs 구문을 사용하면 제어기의 메소드 (모두 $scope.ctrl과 같이 하나의 범위 이름이 지정된 객체에 저장 됨)를 사용하여 범위에 직접 저장된 데이터 (예 : $scope.data)를 구별하는 데 도움이됩니다.