How to pass data from one controller to another in angularJS?

M

Maxim Ivanov2016-07-17 21:27:05

Angular

Maxim Ivanov, 2016-07-17 21:27:05

I didn't understand something, can you tell me with an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script>
    var myModule = angular.module('myModule', []);
    myModule.service('dataService', function($rootScope) {
      return {
      	dataZeroController: {base: 1},  
      	dataOneController: {text: 'text'},  
      };
    });

    myModule.controller('ControllerZero', ['$scope', 'dataService', function($scope, dataService) { 

      $scope.base = dataService.dataZeroController.base;

      $scope.handleClick = function(value) {
        dataService.dataOneController.text = value; // как отдать значение в другой контроллер, где {{ title }}
        alert(value); 
      }
    }]);

    myModule.controller('ControllerOne', ['$scope', 'dataService',  function($scope, dataService) { 
      $scope.title = dataService.dataOneController.text;

    }]);

  </script>
</head>
<body ng-app="myModule">
  
  <div class="box1" ng-controller="ControllerZero">
    <span ng-model="base">{{ base }} </span>
    <button ng-click="handleClick(base)">передать значение base </button>
  </div>
  

  <div class="box2" ng-controller="ControllerOne">
    
    {{ title }}

  </div>

</body>
</html>

How to change the value of another controller from one controller? For example, when clicking on the button
That is, I clicked on the button and instead of `text` I will see `one`

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maxim Ivanov, 2016-07-17
@splincodewd

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script>
    var myModule = angular.module('myModule', []);
    myModule.service('dataService', function($rootScope) {
      return {
            base: 1,
            title: 'text',
          };
    });

    myModule.controller('ControllerZero', ['$scope', 'dataService', function($scope, dataService) { 
      $scope.ds = dataService;

      $scope.handleClick = function(value) {
        dataService.title = value;
      }

    }]);

    myModule.controller('ControllerOne', ['$scope', 'dataService',  function($scope, dataService) { 
      $scope.ds = dataService;
    }]);

  </script>
</head>
<body ng-app="myModule">
  
  <div class="box1" ng-controller="ControllerZero">
    <span ng-model="base">{{ ds.base }} </span>
    <button ng-click="handleClick(ds.base + 1)">передать значение base </button>
  </div>
  

  <div class="box2" ng-controller="ControllerOne">
    
    {{ ds.title }}

  </div>

</body>
</html>