Как контроллеры и функции взаимодействуют между двумя отдельными файлами с использованием .emit и как определить иерархию контроллеров в AngularJS?

Question

Это мой первый пост о переполнении стека, так что я действительно новичок в AngularJS и ASP.Net и у меня много проблем с $ rootcope. $ Emit. Из того, что я прочитал в Интернете, $ rootcopes являются родительскими областями, поэтому все значения, отображаемые там, видимы для всех контроллеров, а шаблоны и области являются функциями внутри контроллеров. Кажется, что вы можете «передать» через иерархию контроллеров вызов к другому контроллеру с помощью $ rootscope. $ Emit («Имя $ rootscope. $ Для имени функции») $rootscope.$on прослушивает этот вызов и затем делает все, что угодно в его функции. У меня проблемы с тем, когда я делаю

$rootscope.$emit("LoadPrintDetailsModal", {}); 

кажется, что никогда не достигнет

$rootscope.$on("LoadPrintDetailsModal", function(event,args) {}. 

Итак, вопрос в том, не понимаю ли я, как $ emit или как работает иерархия контроллеров, или в моем коде проблема?

Я уже пытался использовать emit, и я нажал на отладчик в файле indexController.js после вызова кнопки в моем файле Index.cshtml, но потом, когда я сделал

$rootScope.$emit("LoadPrintDetailsModal", {});

он не попадает в мой файл printableController.js, где

$rootScope.$emit("LoadPrintDetailsModal", function (event, args) {});

// (Index.cshtml) Кнопка в файле Index.cshtml, который вызывает функцию «LoadPrintModal» // в indexController

<button type="button" data-toggle="modal" data-target="#dvPrintModal"
        ng-click="LoadPrintModal()">
  Print
</button>

// (indexController.js) scope.LoadPrintModal в indexController.js, который пытается
// отправить "LoadPrintDetails" в $ rootcope.% on ("LoadPrintDetailsModal",
// функция (событие, аргументы) в printableçontroller.js

$scope.LoadPrintModal = function () {
    debugger;
    $rootScope.$emit("LoadPrintDetailsModal", {});
};

// (printableController.js) файл, в котором находится rootScope.on и должен получить emit

app.controller('PrintableController', function ($scope, $rootScope) {
    $rootScope.$on("LoadPrintDetailsModal", function (event, args) {
        debugger;
        $scope.printModal();
    });

    $scope.printModal = function () {
        console.log("Hello World");
    };
)};

Ожидаемым результатом должен быть консольный журнал hello world, и мы должны запустить отладчик в файле printableController.js

Answer 1

Использование $rootScope.$broadcast:

$rootScope.$broadcast("LoadPrintDetailsModal", {});

Метод $broadcast отправляет события down heirarchy области.

Метод $emit отправляет события up heirarchy.

Для получения дополнительной информации см.

• Руководство разработчика AngularJS - Распространение событий области действия

---

Для захвата вещательных событий используйте $scope.$on:

app.controller('PrintableController', function ($scope, $rootScope) {
    ̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶$̶o̶n̶(̶"̶L̶o̶a̶d̶P̶r̶i̶n̶t̶D̶e̶t̶a̶i̶l̶s̶M̶o̶d̶a̶l̶"̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶e̶v̶e̶n̶t̶,̶ ̶a̶r̶g̶s̶)̶ ̶{̶
    $scope.$on("LoadPrintDetailsModal", function (event, args) {
        debugger;
        $scope.printModal();
    });

    $scope.printModal = function () {
        console.log("Hello World");
    };
)};

Из документов:

Используйте только .$broadcast(), .$emit() и .$on() для атомарных событий

События, которые актуальны во всем приложении (например, аутентификация пользователя или закрытие приложения). Если вы хотите, чтобы события относились к модулям, сервисам или виджетам, вам следует рассмотреть сервисы, директивные контроллеры или сторонние библиотеки

• Инъекционные сервисы и методы вызова напрямую также полезны для прямого общения
• Директивы могут напрямую общаться

Для получения дополнительной информации, семена

• AngularJS Wiki - Лучшие практики

Answer 2

Трудно понять, что происходит без:

1. , видящего иерархию компонентов.Является ли излучающий компонент вниз по иерархии от улавливающего компонента.$emit отправляет сообщения вверх.$browdcast отправляет сообщения вниз.

2. Видя, как вы вводите $rootscope.

Относительно 2. $rootscope инъекция дает вамОсновная область применения.Выполнение $emit из этого не даст нам ничего, поскольку нет $scopes, которые находятся выше $rootScope.

Полагаю, вы хотите ввести $scope, которые представляют конкретную область в иерархии для этого контроллера / компонента.Тогда $emiting будет распространяться вверх на перехватывающий контроллер / компонент должным образом.