Currently, I am working with Angular 1.4.8 and attempting to expand a controller. The original controller and the expanding controller are quite similar, but there is a specific function that I aim to replace in the extending controller.
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 don't want to override vm.callSayHello() so I'm not redefining that function.
// Here's what I intend to override.
vm.sayHello = function() {
console.log('Hello from ControllerTwo.');
// Some additional handling here.
}
}]);
<button type="button" ng-click="ctrl.callSayHello()">Click Me</button>
It appears possible to override the functions of ControllerOne in ControllerTwo. However, in this scenario, the function I wish to override, vm.sayHello(), is not directly triggered by an event like a click, but instead, it is called by another function, vm.callSayHello().
The issue lies in the fact that when vm.callSayHello() is executed from either ControllerOne or ControllerTwo, it always invokes vm.sayHello() from
ControllerOne</code, regardless of being redefined in <code>ControllerTwoI hope this explanation clarifies things. Is there a method to simply replace the vm.sayHello() function in ControllerTwo?