Reloading a controller on click from another controller in angularjs

Question

Below is my html code, I have a method in

moreThanOne.html

which makes variable

show

as true therefore it loads one.html for the first time and calls the init method of my controller. but whenever I change value of show again it does not reload the controller associated with one.html.

So my requirement here is init() method of initiatePaymentCtrl should get call whenever I click a button associated with another controller, so that data refreshes on one.html

<div data-ng-if="data.length>1">
 <div data-ng-include="'moreThanOne.html'"></div>
</div>
<div data-ng-if="data.length==1">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>
<div data-ng-if="show">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>

Controller

app.controller('initiatePaymentCtrl', function($scope, $http, paymentService) {
    function init() {
        alert('init');
        var issuerId = paymentService.getIssuerId();
        var paymentItemId = paymentService.getPaymentItemId();
        $scope.paymentOptions = {};
        if (typeof issuerId !== "undefined") {
            paymentService.getPaymentOptions(issuerId,paymentItemId).then(
                    function(paymentOptions) {
                        $scope.paymentOptions = paymentOptions;
                    });
        }
    }
    init();
    $scope.initiateInitialPayment = function(){
        paymentService.initiateInitialPayment();
    }
});

I cant use service as chances are there that data will not change on click

need to use a service to share data or methods across controllers, or use events to broadcast changes — charlietfl
– charlietfl, Commented Mar 25, 2015 at 13:56
If it's a parent and child controllers. Then Instead of defining show which is primitive data type use object and property like $scope.object = { show : true }. Sometimes if you're using primitives it won't reflect in parent & child controllers as it's pass by value and not by reference — mohamedrias
– mohamedrias, Commented Mar 25, 2015 at 14:03

Austin Mullins · Accepted Answer · 2015-03-25 15:09:40Z

You should definitely use a service. I'm not sure what you mean by this statement:

I cant use service as chances are there that data will not change on click

If you doubt that Angular will perform a digest cycle when your button is clicked, you can test that easily. Once the digest has started, changes to $scope should appear instantaneous.

Here is an example of a simple message service that can be used to pass data between controllers:

app.service("messageService", function() {
    this._subscribers = [];

    this.addSubscriber = function(sub) {
        this._subscribers.push(sub);
    };

    this.sendMessage = function(message) {
        var len = this._subscribers.length;
        for (var i = 0; i < len; i++) {
            this._subscribers[i].receive(message);
        }
    };
});

Receivers can subscribe to respond to messages:

app.controller("responderController", function($scope, messageService) {
    var numClicks = 0;
    $scope.response = "";
    $scope.data = [];
    $scope.show = true;
    $scope.stuff = "Stuff to show at first";
    $scope.otherStuff = "Stuff to show for more than one";
    $scope.oneStuff = "Stuff to show for one";

    this.receive = function(message) {
        if ($scope.show) {
            $scope.show = false;
        }

        if (++numClicks > 2) {
            $scope.data = [];
            $scope.show = true;
            numClicks = 0;
        }
        else {
            $scope.data.push(message);
        }
    };
    messageService.addSubscriber(this);
});

Senders can use the service to send messages to all subscribers:

app.controller("senderController", function($scope, messageService) {
    $scope.sendClick = function() {
        messageService.sendMessage("click");
    };
});

This can be utilized in HTML like so:

<div data-ng-controller="responderController">
    <div data-ng-if="show">{{stuff}}</div>
    <div data-ng-if="data.length > 1">{{otherStuff}}</div>
    <div data-ng-if="data.length==1">{{oneStuff}}</div>
</div>
<button data-ng-controller="senderController" data-ng-click="sendClick()">Click</button>

You can see it working in a fiddle.

Raulucco · Accepted Answer · 2015-03-25 14:03:31Z

0

Use two different controller that inherit from one commun controller. Although it seems to me like use a directive is better in this case.

controller inheritance:

var app = angular.module('inheritance', []);

app.controller('ParentCtrl ', function($scope) {

});

app.controller('ChildCtrl', function($scope, $controller) {
  $controller('ParentCtrl', {$scope: $scope});
});

answered Mar 25, 2015 at 14:03

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Reloading a controller on click from another controller in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related