Подтвердить что ты не робот

Связь между модулями в AngularJS

Я предполагаю, что возможно иметь много angular -модулей, прикрепленных к различным областям в пределах одной оболочки. Но могут ли модули в AngularJS "разговаривать" друг с другом? Если да, то как?

4b9b3361

ОТВЕТЫ

Ответ 1

Существуют различные способы взаимодействия модулей или обмена информацией.

  • Модуль может быть введен в другой модуль, и в этом случае контейнерный модуль имеет доступ ко всем элементам введенного модуля. Если вы посмотрите angular seed, модули создаются для директивы, контроллеров, фильтров и т.д., Что-то вроде этого

    angular.module( "myApp", [ "myApp.filters", "myApp.services", "myApp.directives", "myApp.controllers" ]) Это скорее механизм повторения, а не механизм коммуникации.

  • Второй вариант, как объяснил @Eduard, - использовать службы. Поскольку службы являются одноточечными и могут быть введены в любой контроллер, они могут действовать как механизм связи.

  • Как пояснил @Eduard, третий вариант - использовать родительский контроллер с использованием объекта $scope, поскольку он доступен для всех дочерних контроллеров.

  • Вы также можете ввести $rootScope в контроллеры, которым необходимо взаимодействовать и использовать методы $broadcast и $on для создания шаблона служебной шины, в котором контроллеры взаимодействуют с помощью механизма pub\sub.

Я бы наклонился к 4-му варианту. См. Также более подробную информацию Каков правильный способ связи между контроллерами в AngularJS?

Ответ 2

Использование механизма обслуживания для связи между контроллерами модулей.

 (function () {
        'use strict';

    //adding moduleB as dependency to moduleA

    angular.module('Myapp.moduleA', ['Myapp.moduleB'])
      .controller('FCtrl', FCtrl)
      .service('sharedData', SharedData);

    //adding the dependency shareData to FCtrl

    FCtrl.$inject = ['sharedData'];

    function FCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    //shared data service
    function SharedData() {

      this.data = {
        value: 'my shared data'
      }

    }

    //second module
    angular.module('Myapp.moduleB', [])
      .controller('SCtrl', SCtrl);

    SCtrl.$inject = ['sharedData'];

    function SCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    })();

И HTML следующим образом:

<html ng-app="firstModule">
<body>

  <div ng-controller="FCtrl as xyz">
    <input type=text ng-model="xyz.data.value" />
  </div>

  <div ng-controller="SCtrl as abc">
    <input type=text ng-model="abc.data.value" />
  </div>

</body>
</html>