Как я могу общаться между контроллерами? - PullRequest
Новая
       0

Как я могу общаться между контроллерами?

0 голосов
/ 22 мая 2018

Вот мой код: 

<div ng-controller="mainCtrl">
    <button ng-click="onclick()"></button>
    <button ng-click="onclick()"></button>
    <button ng-click="onclick()"></button>
    {{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>

<div ng-controller="lastController">{{display}}</div>

Я должен получать какое-то сообщение в каждом div, когда пользователь нажимает на кнопку.

Я попробовал следующий код: 

app.controller('mainCtrl',function($scope,$rootScope){
    $scope.OnClick = function (msg) {
        $rootScope.$broadcast("firstEvent",{});
    }

    $scope.$on("firstEvent", function (msg ) {
        $scope.display = "hello world";
    });
});

app.controller('SecondController',function(  $scope){
    $scope.$on("firstEvent", function (msg) {
        $scope.display = "hello how Are you";
    });
});

app.controller('lastController',function($scope) {        
    $scope.$on("firstEvent", function (msg) {
        $scope.display = "this is my Query";
    });
});

Когда пользователь нажимает на каждую кнопку, он должен получать данные в каждом делении.

Почему это возможно только с $on, $event и $broadcast?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вот решение:

Я предпочитаю не использовать rootScope, вы можете использовать intermaeidate service до для обмена данными между двумя controllers

Решение с услугами:

Вот как выглядит сервис: 

app.service('StoreService',function(){
  var data;

  this.save=function(data){        
       this.data=data;

  };

  this.getData=function(){

    return this.data;

  };
});

Использование service без rootScope

Демонстрация без rootScope

Решение с rootScope

var app = angular.module('myApp', []);
app.controller('mainCtrl',function($scope,$rootScope){
  $scope.buttonclick = function (msg) {
		var object = {
        data: msg
        }
        $rootScope.$broadcast("firstEvent",object);
    }
  $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });

})
app.controller('SecondController',function(  $scope, $rootScope){

  $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });
})
 app.controller('lastController',function(  $scope, $rootScope){

   $rootScope.$on("firstEvent", function (event, msg) {
  
     $scope.display = msg.data;
  });
})
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp">

<div ng-controller="mainCtrl">
<button ng-click="buttonclick('button1')">button1</button>
<button ng-click="buttonclick('button2')">button2</button>
<button ng-click="buttonclick('button3')">button3</button>
<br>
 {{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>
<div ng-controller="lastController">{{display}}</div>


</div>

</body>
</html>

Пожалуйста, запустите приведенный выше фрагмент

Вот рабочая демонстрация

0 голосов
/ 22 мая 2018

$ broadcast () отправляет четное число от родительского к дочерним контроллерам.С другой стороны, метод $ emit () делает прямо противоположное.Он отправляет событие вверх от текущего контроллера ко всем его родительским контроллерам.

Это простой пример связи между контроллерами 

angular.module("app", [])
  .controller("mainCtrl", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.go = function(msg) {
        if (msg == 1) {
          $scope.display = "hello firstEvent";
        } else if (msg == 2) {
          $rootScope.$broadcast("showSomething", {});
        } else {
          $rootScope.$broadcast("showGoodBye", {});
        }
      };
    }
  ]).controller("SecondController", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.$on("showSomething", function(msg) {
        $scope.display = "hello Something";
      });
    }
  ]).controller("ThirdController", [
    "$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.$on("showGoodBye", function(msg) {
        $scope.display = "hello GoodBye";
      });
    }
  ]);
<div ng-app="app">
  <div ng-controller="mainCtrl">

    mainCtrl : {{display}}
    <br>
    <button ng-click="go(1)"> Show Hello </button>
    <button ng-click="go(2)"> Show Something </button>
    <button ng-click="go(3)"> Show GoodBye </button>

  </div>
  <hr>
  <div ng-controller="SecondController">

    SecondController : {{display}}

    <hr>


  </div>
  <div ng-controller="ThirdController">

    SecondController : {{display}}

    <hr>


  </div>
</div>

Полный тур

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...