angular extend controller methods

Question

In angularJs I have a bunch of controllers with some funktions they are same:

angular.module('myApp').controller(...){

    function lockForm(id){
        ...
    }

    function releaseForm(id){
        ...
    }

    function dbError(e){
        ...
    }

    // and some other little stuff again and again in every controller
}

The examples I've read are all based on extending (mixin) stuff from $scope and @this. Is'nt there a way to extend the whole controller as is?

With thanks to Shushanth Pallegar I solved my Problem. It's not exactly what I wanted but way better than before.

// base ctrl
angular.module('myApp').controller('baseViewCtrl', function ($scope, viewData) {

        this.lockForm = function() {
            viewData.isLoading = true;
        };

        // ... and others

});


// child ctrl
angular.module('myApp').controller('childCtrl', function ($scope) {
        var viewData = {
            // some stuff
        };

        // inject from basecontroller
        angular.extend(this, $controller('baseViewCtrl', {$scope: $scope, viewData: viewData}));

        // link $scope
        $scope.viewData = viewData;
        $scope.onSelectUnit = onSelectUnit;

        // child controller methods
        function onSelectUnit(){
            this.lockForm();
            ...
        }
});

It looks a bit ugly at all because I avoided @this nearly everywhere

Perhaps I go this way and use base instead of @this to make it more clear that there are injected methods:

// child ctrl
angular.module('myApp').controller('childCtrl', function ($scope) {
        var viewData = {
            // some stuff
        };

        // inject from basecontroller
        var base = $controller('baseViewCtrl', {$scope: $scope, viewData: viewData});

    // link $scope
    $scope.viewData = viewData;
    $scope.onSelectUnit = onSelectUnit;

    // child controller methods
    function onSelectUnit(){
        base.lockForm();
        ...
    }

Put common functions in a service and inject service. Controllers should be very lean. Business logic belongs in services — charlietfl
– charlietfl, Commented Jun 4, 2016 at 18:43
You can use parent controller and child controller concept.Or else you can use also service/factory feature. — Sarju
– Sarju, Commented Jun 4, 2016 at 18:43

Shushanth Pallegar · Accepted Answer · 2016-06-04 19:15:31Z

3

Use $controller service and pass the name of the controller you need to extend as below

parent controller

  angular.module('myApp').controller('parentController',function(){

     $scope.lockForm = function(id){
        ...
    }
  });

child controller

angular.module('app').controller('childController',function($controller){

    var parentController = $controller('parentController',{$scope:$scope});

     console.log(parentController.lockForm);

  });

refer $controller

in-order to extend to this , use as below

angular.module('app').controller('childController',function($controller){

    var parentController = $controller('parentController',{$scope:$scope});
     angular.extend(this,parentController);

     console.log(this.lockForm);

  });

If your using functions with attaching those to scopes your need to return those functions as below.

 angular.module('myApp').controller('parentController',function(){

         var _lockForm = function(id){
            ...
        }

       return{
          lockForm = _lockForm
       }

      });

so in your extended controller could use as below

 var extendedController = $controller('parentController',{$scope:$scope});

    extendeController.lockForm('123');

edited Jun 4, 2016 at 19:15

answered Jun 4, 2016 at 18:49

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

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

2 Comments

Stefan Brinkmann Over a year ago

I see. But whats with the closure of the imported methods (or better named functions)?

Shushanth Pallegar Over a year ago

@Steffomio you have return your function and used them . I have updated the answer with this regrad !

Collectives™ on Stack Overflow

angular extend controller methods

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related