AngularJS inheritance - overwrite $scope.method()

Question

I have a ParentController and a ChildController, which look like this:

ParentController:

app.controller("ParentController", function($scope) {

    // define preload method, expose to template
    $scope.preload = function() {
        console.log("parent");
    };

    // call preload function
    $scope.preload();
});

ChildController:

app.controller("ChildController", function($scope) {
    $controller("ParentController", {
        $scope: $scope,
    });

    // override preload method here
    $scope.preload = function() {
        console.log("child")
    };
});

As you can see, both Controllers define $scope.preload(), which is called upon instantiation in the ParentController. My goal is for ChildControllerto overwrite this method, so that when it is called, it logs a different string to the console.

Is this possible? If not, how else would I go about reusing all methods defined in ParentControllerin my ChildController?

reusable components should go in services/factory and not in controller. — harishr
– harishr, Commented Oct 25, 2014 at 18:01

harishr · Accepted Answer · 2014-10-25 18:12:44Z

4

To share the data among independent controllers, Services can be used. Create a service with the data model that needs to be shared. Inject the service in the respective controllers.

In the following example, Service is used to store the variable x. The independent controllers will check the value of X whenever needed.

angular.module('myApp', [])
    .service('myService', function () {
        var x=5 ;
        return {
            increase : function() {
                x++;
            },
            getX : function() {
                return x;
            }
       };
    })

function ControllerA($scope, myService) {
    $scope.x = 1;
    $scope.incrementDataInService= function() {
        myService.increase();
    }
    $scope.syncDataWithService= function() {
        $scope.x = myService.getX();
    }        
}

function ControllerB($scope, myService) {
   $scope.x = 1;
    $scope.incrementDataInService= function() {
        myService.increase();            
    }
    $scope.syncDataWithService= function() {
        $scope.x = myService.getX();
    }    
}

answered Oct 25, 2014 at 18:12

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

3 Comments

doque Over a year ago

What about working with $scope.member inside the service? Will I have to pass it as a parameter or can I reuse whatever $scope is inside the Controller?

harishr Over a year ago

pass it as a parameter, but not $scope, pass the parameter you are working with...

harishr Over a year ago

dont pass $scope, pass the parameter on which the logic depends.. passing $scope is a code smell

Collectives™ on Stack Overflow

AngularJS inheritance - overwrite $scope.method()

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related