AngularJS Controller Inheritance Patterns?

Question

I have below controller code

myApp.controller('SteppersCtrl', ['$scope', '$http',  
    , function ($scope, $http) {



     var SteppersCtrl= (function () {
    function SteppersCtrl($mdStepper, $timeout) {
        alert('hi');
        this.$mdStepper = $mdStepper;
        this.$timeout = $timeout;
        this.isVertical = true;
        this.isLinear = false;
        this.isAlternative = true;
        this.isMobileStepText = true;
        this.campaign = false;
    }

    SteppersCtrl.prototype.selectCampaign = function () {

        var _this = this;
        var steppers = this.$mdStepper('stepper-demo');
        steppers.showFeedback('Checking, please wait ...');
        this.$timeout(function () {
            if (_this.campaign) {
                steppers.clearError();
                steppers.next();
            }
            else {
                _this.campaign = !_this.campaign;
                steppers.error('Wrong campaign');
            }
        }, 3000);
    };
    SteppersCtrl.prototype.previousStep = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.back();
    };
    SteppersCtrl.prototype.cancel = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.back();
    };
    SteppersCtrl.prototype.nextStep = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.next();
    };
    SteppersCtrl.prototype.toggleMobileStepText = function () {
        this.isMobileStepText = !this.isMobileStepText;
    };
    SteppersCtrl.prototype.toggleLinear = function () {
        this.isLinear = !this.isLinear;
    };
    SteppersCtrl.prototype.toggleAlternative = function () {
        this.isAlternative = !this.isAlternative;
    };
    SteppersCtrl.prototype.toggleVertical = function () {
        this.isVertical = !this.isVertical;
    };
    SteppersCtrl.prototype.showError = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.error('Wrong campaign');
    };
    SteppersCtrl.prototype.clearError = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.clearError();
    };
    SteppersCtrl.prototype.showFeedback = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.showFeedback('Step 1 looks great! Step 2 is comming up.');
    };
    SteppersCtrl.prototype.clearFeedback = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.clearFeedback();
    };
    SteppersCtrl.$inject = [
        '$mdStepper',
        '$timeout'
    ];
    return SteppersCtrl;

}());  
  SteppersCtrl();
}]);

But in html file selectCampaign not able to call on button click.

<div ui-view ng-controller="SteppersCtrl as vm" layout="column">
.................................
.................................
.................................
<md-button class="md-primary md-raised" ng-click="vm.selectCampaign();"/>
.................................

Bartek Fryzowicz · Accepted Answer · 2017-02-11 08:15:52Z

1

The problem is that in your case controller should return an instance of SteppersCtrl (return new SteppersCtrl()). Angular creates instance of an controller using new but if controller constructor explicitly returns an object this object will be used as a result (this is how using constructors works in javascript - more details here). However, because SteppersCtrl constructor expects some dependencies to inject it will not work in this case (if you create instance of object manually with new keyword Angular is not aware ot this and will not inject dependencies). One of the solution is to move whole SteppersCtrl definition outside angular controller method and then register it as a controller. Something like this:

function SteppersCtrl($mdStepper, $timeout) {
    alert('hi');
    this.$mdStepper = $mdStepper;
    this.$timeout = $timeout;
    this.isVertical = true;
    this.isLinear = false;
    this.isAlternative = true;
    this.isMobileStepText = true;
    this.campaign = false;
}

SteppersCtrl.prototype.previousStep = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.back();
};
SteppersCtrl.prototype.cancel = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.back();
};
SteppersCtrl.prototype.nextStep = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.next();
};
SteppersCtrl.prototype.toggleMobileStepText = function () {
    this.isMobileStepText = !this.isMobileStepText;
};
SteppersCtrl.prototype.toggleLinear = function () {
    this.isLinear = !this.isLinear;
};
SteppersCtrl.prototype.toggleAlternative = function () {
    this.isAlternative = !this.isAlternative;
};
SteppersCtrl.prototype.toggleVertical = function () {
    this.isVertical = !this.isVertical;
};
SteppersCtrl.prototype.showError = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.error('Wrong campaign');
};
SteppersCtrl.prototype.clearError = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.clearError();
};
SteppersCtrl.prototype.showFeedback = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.showFeedback('Step 1 looks great! Step 2 is comming up.');
};
SteppersCtrl.prototype.clearFeedback = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.clearFeedback();
};

SteppersCtrl.$inject = [
    '$mdStepper',
    '$timeout'
];


myApp.controller('SteppersCtrl',  SteppersCtrl);

edited Feb 11, 2017 at 8:15

answered Feb 6, 2017 at 11:25

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Subodh Joshi Over a year ago

Hi thanks for your comment i am newbie .Can you add litttle bit more code how could it should work? DO i have to change SteppersCtrl as well which is using prototype.

Bartek Fryzowicz Over a year ago

I've added rest ot the code - generally it's the same as in your code example. What important is that you should register your constructor function as controller - when angular creates instance of controller it will call registered function with new keyword and inject required dependencies

Subodh Joshi Over a year ago

Thanks i did what you mentioned now i am getting Error: [ng:areq] Argument 'SteppersCtrl' is not a function, got undefined.Only diffrent i have registered lieke this myApp.controller('SteppersCtrl', ['$scope', '$http', function ($scope, $http ) {

Subodh Joshi Over a year ago

Sorry that was typo its SteppersCtrl only.

Bartek Fryzowicz Over a year ago

Hard to say. Maybe you're using old Angular version which doesnt support controller as syntax? here is simplified jsFiddle using angular 1.5: jsfiddle.net/bartekfr/yju5dstq/2

|

Collectives™ on Stack Overflow

AngularJS Controller Inheritance Patterns?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related