コントローラとオーバーライド関数のためのangular.extend（）の使用

Question

私は角度1.4.8を使用しており、コントローラを拡張しようとしています。元のコントローラーと拡張コントローラーは非常に似ていますが、拡張コントローラーでオーバーライドしたい機能があります。

angular.module('app').controller('ControllerOne', function() { 

    var vm = this; 

    vm.data = {}; 

    vm.callSayHello = function() { 
     vm.sayHello(); 
    } 

    vm.sayHello = function() { 
     console.log('Hello from ControllerOne.'); 
    } 
}); 

angular.module('app').controller('ControllerTwo', ['$scope', function($scope) { 

    angular.extend(vm, $controller('OrdersAddController', { $scope: $scope })); 

    // I do not want to override vm.callSayHello(), so I don't redeclare that function. 

    // This is what I want to override. 
    vm.sayHello = function() { 
     console.log('Hello from ControllerTwo.'); 

     // Some other extra handling. 
    } 
}]); 

<button type="button" ng-click="ctrl.callSayHello()">Click Me</button> 

私はControllerTwoでControllerOne機能を無効にすることができますように見えます。しかし、この特定のケースでは、オーバーライドする関数vm.sayHello()は、クリックのようなイベントから直接呼び出されるのではなく、別の関数であるvm.callSayHello()によって呼び出されます。

は、だから何が起こるかであることvm.callSayHello()もvm.sayHello()を呼び出しますが、それは常にControllerTwoで再宣言されているにもかかわらずControllerOne上の関数を呼び出すControllerOneかControllerTwo、のいずれかから呼び出されたとき。

うまくいけばうまくいきます。しかし、ControllerTwoのvm.sayHello()関数をオーバーライドする方法はありますか？今

function mySmth(vm, $scope) { 
    // no vm = this 
vm.smth = ... 
} 

：

Answer 1

あなたはこのようにそれを行うことができます

function baseCtrl($scope) { 
    var vm = this; 
    mySmth(vm, $scope); 
} 

function etendedCtrl($scope) { 
    var vm = this; 
    mySmth(vm, $scope); 
    vm.smth = ...// something new 
} 

しかし、これは空想ではなく、実際には素敵なアドバイスがある - ちょうどコントローラを拡張しない...あなたが共通している場合機能 - サービスを提供するか、コントローラを分離する。

Answer 2

あなたは、ウルアプローチのためにあなたの答えのための

//controller 1 
 
function ControllerOne() { 
 
    this.data = {}; 
 
} 
 

 
ControllerOne.prototype.callSayHello = function() { 
 
    this.sayHello(); 
 
}; 
 

 
ControllerOne.prototype.sayHello = function() { 
 
    console.log('Hello from ControllerOne.'); 
 
}; 
 

 
ControllerOne.$inject = []; 
 

 
//controller 2 
 
function ControllerTwo($scope) { 
 

 
} 
 

 
ControllerTwo.prototype = Object.create(ControllerOne.prototype); 
 

 
ControllerTwo.constructor = ControllerTwo; 
 

 
ControllerTwo.prototype.sayHello = function() { 
 
    console.log('Hello from ControllerTwo.'); 
 
}; 
 

 
ControllerTwo.$inject = ['$scope']; 
 

 

 
//angular controller 
 
angular.module('app', []) 
 
    .controller('ControllerOne', ControllerOne) 
 
    .controller('ControllerTwo', ControllerTwo);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="ControllerOne as ctrl"> 
 
    <button type="button" ng-click="ctrl.callSayHello()">Click Me (Ctrl 1)</button> 
 
    </div> 
 
    <div ng-controller="ControllerTwo as ctrl"> 
 
    <button type="button" ng-click="ctrl.callSayHello()">Click Me (Ctrl 2)</button> 
 
    </div> 
 
</div>