How to watch variables in other controllers AngularJS

Question

I have a component called histogram demo in which there is a separate controller that has a variable called $scope.selectedElements and I want to watch this variable in the main appCtrl controller. How would I be able to access this variable without $rootScope.

Main HTML

<html lang="en-US" ng-app="histogram-test" ng-controller="appCtrl">

 <div  class="histogram-container"> <histogram-demo options = "options" data="data"></histogram-demo></div>
 </html>

App.JS

angular
.module('histogram-test')
.config(function ($httpProvider, usSpinnerConfigProvider) {
    $httpProvider.defaults.withCredentials = true;
    usSpinnerConfigProvider.setDefaults({
        // see http://spin.js.org/
        color: 'white',
        radius: 30,
        width: 8,
        length: 16,
        shadow: true,
    });
})
.controller('appCtrl', function ($scope, appConfig, $rootScope, auth, $state) {
/** HERE is where I want to watch $scope.selectedElements in Component.js **/}

Component.JS

angular
.module('histogram-test').component('histogramDemo', {
    bindings: {
        data: "=",
        options: "=",
    },
    templateUrl: templateUrl,
    controller: controller,
    controllerAs: 'vm',
});

function controller($state, $scope) { ...
$scope.selectedElements = []; ...}

how would i use an event emitter to send my array of objects to app.js? — Anonymous Dodo, Jun 29 '17 at 18:45
Move the selectedElements list to a service and inject the service in both the component and controller. That works because services are singletons. — Nikolaj Dam Larsen, Jun 29 '17 at 18:55
Since both cotroller are in different modules you need to use Shared service https://stackoverflow.com/a/16725874/5950377 — Gavishiddappa Gadagi, Jun 29 '17 at 19:00

score 1 · Accepted Answer · answered Jun 29 '17 at 19:31

You could simply consider passing a method to component, and call that method from component whenever you're changing selectedElements. Also for sec of make your application more performant follow one way data flow by making your bindings to use <(one way binding).

bindings: {
    data: "<",
    options: "<",
    selectedItemChange: '&'
},

and then your directive element will look like

<histogram-demo 
   options="options" 
   data="data" 
   selected-item-changed="itemChanged(items)">
</histogram-demo>

And whenever you changed vm.selectedItems variable inside controller component, do call vm.selectedItemChange({items: vm.selectedItems}), so the consumer of histogram-demo component will have method which will receive an selectedItems array.

How to watch variables in other controllers AngularJS

1 Answers1