Access view controller data from app controller in Angular

Question

I use ng-view to display a view inside my main web page. This view has it's own controller and in there I populate ui-grid data. In my outer page I have import/export buttons which seem like they use the app's controller. So how can I access the views data (it's grid object) inside it's controller from the app's controller?

I'm using Angular 1.

<body ng-app="myApp" ng-controller="myController" style="background-color: yellow;">

    <!-- the header that the entire app will use no matter what view is displayed -->
    <div ng-include="'Views/header.htm'"></div>
    <div style="height: 100%;" ng-view></div>
</body>

I have a button inside header.htm. When it's pressed it seems to be at the myApp scope as that's the function that gets raised. Inside that I need to tell whatever view controller is loaded to do something.

the canonical answer to shared data between controllers used to be "write a service" in angular 1, but I don't know it this remains true for angular 2. By the way, 1 and 2 are different frameworks despite the name, would you be kind enough to tell us which one are you using? — Paulo Scardine
– Paulo Scardine, Commented Mar 13, 2017 at 13:47
Is there some kind of way to send a message from the app controller to the view controller to tell the view controller to do something? — user441521
– user441521, Commented Mar 13, 2017 at 13:51

Nehal Soni · Accepted Answer · 2017-03-13 14:22:28Z

You can use $broadcast service to let your view controller know about click event in app controller.

angular.module('app').controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope){

    $scope.exportList = function() {
        $rootScope.$broadcast('exportData', { object: test}); // If data needs to be passed you can pass it in event
    };
}])

angular.module('app').controller('ViewController', ['$rootScope', function($rootScope){

    $rootScope.$on('exportData', function(event, data){
        if(data.object) {
            // Export logic here
        }
    });
}])

Call exportLink function on ng-click in your view.

You have mentioned in question that your data is populating in ui-grid from ViewController, so you don't need parameters to be passed from view as you already have it in your $scope variable. If needed, use event argument as shown.

digit · Accepted Answer · 2017-03-13 14:14:55Z

1

You can use broadcast to send event to the child scope and listen back using on. There's another one , $emit. Since you want to pass the event/messages to the child scope/downward you must use broadcast, $emit is the reverse.

Keep in mind : $emit dispatches an event upwards through the scope hierarchy, while $broadcast dispatches an event downwards to all child scopes

myController.js

$scope.buttonClick = function() {
    $rootScope.$broadcast('pass-event');
}

Received event

ViewController.js (eg)

$rootScope.$on('pass-event', function (event, args) {
     // do what you want to do
});

edited Mar 13, 2017 at 14:14

answered Mar 13, 2017 at 14:07

digit

4,5653 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Access view controller data from app controller in Angular

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