How do I pass data between controllers?

Question

How do I pass data between controllers?

Navigation

#1 by (3 votes)

2

I want to make a navigation bar in my web, so, in the index I want to put the section where the user is located.

The problem I have is that I do not know how to pass the variable to the MasterController from the Controller of each view, so that changing the section is automatically changed in the index.

I'll attach the link to the example I'm using.

Master Controller

angular.module('RDash')
    .controller('MasterCtrl', ['$scope', '$cookieStore', MasterCtrl]);

function MasterCtrl($scope, $cookieStore) {
    /**
     * Sidebar Toggle & Cookie Control
     */
    var mobileView = 992;

    $scope.getWidth = function() {
        return window.innerWidth;
    };

    $scope.$watch($scope.getWidth, function(newValue, oldValue) {
        if (newValue >= mobileView) {
            if (angular.isDefined($cookieStore.get('toggle'))) {
                $scope.toggle = ! $cookieStore.get('toggle') ? false : true;
            } else {
                $scope.toggle = true;
            }
        } else {
            $scope.toggle = false;
        }

    });

    $scope.toggleSidebar = function() {
        $scope.toggle = !$scope.toggle;
        $cookieStore.put('toggle', $scope.toggle);
    };

    window.onresize = function() {
        $scope.$apply();
    };
}

Controller

/**
 * Alerts Controller
 */

angular
    .module('RDash')
    .controller('AlertsCtrl', ['$scope', AlertsCtrl]);

function AlertsCtrl($scope) {
    $scope.alerts = [{
        type: 'success',
        msg: 'Thanks for visiting! Feel free to create pull requests to improve the dashboard!'
    }, {
        type: 'danger',
        msg: 'Found a bug? Create an issue with as many details as you can.'
    }];

    $scope.addAlert = function() {
        $scope.alerts.push({
            msg: 'Another alert!'
        });
    };

    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };
}

The thing would be that the master modifies the index, it is the only one, it would have to know how to pass a parameter from the controller with the section to which each controller corresponds.

Thank you!

angularjs angular-directivas

asked by Diego 07.09.2016 в 12:40

source

1 answer

Query database by parts Class error, query php, can not be converted to whole

score 3 · Accepted Answer

Use $rootScope . Remember that all controllers have a $scope and that said $scope inherits the properties of $rootScope and it works in the view as well.

I will not reproduce your code but I will give you an example that illustrates what I say

angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>{{global.valor}}</h1><p><a href="#/next">Siguiente</a></p>',
        controller: 'PrimerCtrl'
      })
      .when('/next', {
        template: '<h1>{{global.valor}}</h1><p><a href="#/last">Siguiente</a></p>',
        controller: 'SegundoCtrl'
      })
      .when('/last', {
        template: '<h1>{{global.valor}}</h1>',
        controller: 'TercerCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .controller('PrimerCtrl', function($scope) {
    $scope.global.valor = 1;
  })
  .controller('SegundoCtrl', function($scope) {
    $scope.global.valor = 2;
  })
  .controller('TercerCtrl', function($rootScope) {
    $rootScope.global.valor = 3;
  })
  .run(function($rootScope) {
    $rootScope.global = {};
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

In all cases, the value that is being shown / modified is that of $rootScope even if I do it with $scope.global . That is the inheritance system doing its function.

Be careful when executing directly from $scope.propiedad because if you do not use an object you may not work for it. If you want to be sure, inject the $rootScope and manipulate it directly there.