Angular Js Newbie - Link In A Controller View That Triggers Another Controller Action

angular newbie here. Let's say I have an application that needs to monitor different things like 'news submitted' 'login attemps' and so on. My mainController which responsibility

Solution 1:

This is how it would work -

1. from your mainController, emit an event upwards (through $emit). Call to $emit dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

2. Inside newsController and loginAttemptsController add an event listener (using $rootScope.$on) to listen to the event emitted from mainController, get data from the target scope (in your case its mainController's scope) and set it to newsController and loginAttemptsController's scope model.

for details go through angular documentation - https://docs.angularjs.org/api/ng/type/$rootScope.Scope

I have set up a plunk here - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

Example code (html template) :

<divng-controller="mainController"><buttondata-ng-click="OnNewButtonClick()">Show News</button><buttondata-ng-click="OnLoginAttemptButtonClick()">Show Login Attempts</button></div><divng-controller="newsController">
    {{newsControllerData.News}}
</div><divng-controller="loginAttemptsController">
    {{loginAttemptsControllerData.loginAttempts}}
</div>

Example code (main controller) :

app.controller("mainController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.newsControllerData = {};
    $scope.loginAttemptsControllerData = {};

    // from mainController emit HandleNews upwards on the scope$scope.OnNewButtonClick = function () {
        $scope.newsControllerData.info = "Hello World";
        $scope.$emit("HandleNews");
    }

    // from mainController emit HandleLoginAttempts upwards on the scope$scope.OnLoginAttemptButtonClick = function () {
        $scope.loginAttemptsControllerData.info = "login count = 4";
        $scope.$emit("HandleLoginAttempts");
    }

}]);

Example code (news Controller) :

app.controller("newsController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.newsControllerData = {};

    // when any controller calls HandleNews, i would listen$rootScope.$on("HandleNews", function (evt, next, current) {
        $scope.newsControllerData.News = evt.targetScope.newsControllerData.info;
    });

}]);

Example code (loginAttempts Controller) :

app.controller("loginAttemptsController", ["$rootScope", "$scope", function ($rootScope, $scope) {

    $scope.loginAttemptsControllerData = {};

    // when any controller calls HandleLoginAttempts, i would listen$rootScope.$on("HandleLoginAttempts", function (evt, next, current) {
        $scope.loginAttemptsControllerData.loginAttempts = evt.targetScope.loginAttemptsControllerData.info;

    });


}]);

Solution 2:

You can create a service, that will be storing the data between the controllers. Then you can use / change that piece of data in both of your controllers and associated views.

app.service('newsDataService', function() {

        this.newsData = [];

});

then in your controller,

app.controller('newsController', function($scope, 'newsDataService') {

    // access the data using newsDataService.newsData.

});


app.controller('loginAttemptsController', function($scope, 'newsDataService') {

    // access the data using newsDataService.newsData.

});

More information on AngularJs Services : https://docs.angularjs.org/guide/services