Home / Questions / 22855
Accepted
Diego
Asked: 2020-09-08 02:40:34 +0800 CST 2020-09-08 02:40:34 +0800 CST

How do I pass data between controllers?

  • 772

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

The problem I have is that I don't know how I can pass the variable to the MasterController from the Controller of each view, so that when I change the section it changes automatically in the index.

I paste the link of the example that I am 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

1 Answers

  1. Best Answer

    Use the $rootScope. Remember that all controllers have a $scopeand said $scopeinherits properties from $rootScopeand this works in the view as well.

    I am not going to 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 displayed/modified is that of $rootScopealthough I do it with $scope.global. That's the inheritance system doing its thing.

    Be careful when running directly from del $scope.propiedadbecause if you don't use an object it may not work for you. If you want to be absolutely sure, inject the $rootScopeand manipulate it directly there.

    • 3