0

Есть пример

<!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', []).factory('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>

Как из одного контроллера изменить значение другого? Например, при клике на кнопку

1 ответ 1

1

Вариантов связи может быть очень много:

  1. $rootScope
  2. factory/service и т.д.
  3. отслеживание события
  4. вложить контроллеры друг в друга

В примере с factory из вопроса, достаточно поместить саму factory в скоп

    var myModule = angular.module('myModule', []).factory('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; // как отдать значение в другой контроллер, где {{ title }}
        }
      }
    ]);

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

      }
    ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="myModule">

  <div class="box1" ng-controller="ControllerZero">
    <span ng-model="base">{{ ds.base }} </span>
    <button ng-click="handleClick(ds.base)">передать значение base</button>
  </div>
  <div class="box2" ng-controller="ControllerOne">
    {{ ds.title }}
  </div>
</div>

7
  • А при помощи такой связи, можно будет вызывать методы из другого контроллера? И чем же лучше factory от service, если переименовать тоже самое получается в примере
    – splincode
    17 июл 2016 в 19:05
  • @splincode, factory отличается от service способом создания. Если понадобилось вызывать функции одного контроллера из другого - стоит пересмотреть разметку html и сами контроллеры
    – Grundy
    17 июл 2016 в 19:07
  • а почему именно так?
    – splincode
    18 июл 2016 в 8:52
  • @splincode, не понял вопрос
    – Grundy
    18 июл 2016 в 8:53
  • простите, хотел сказать, почему необходимо пересматривать разметку, слишком запутано получается?
    – splincode
    18 июл 2016 в 8:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.