时间戳

首页 > 解决方案 > 控制器和函数如何使用 .emit 在两个单独的文件之间进行通信，以及如何在 AngularJS 中告诉控制器层次结构？

html - 控制器和函数如何使用 .emit 在两个单独的文件之间进行通信，以及如何在 AngularJS 中告诉控制器层次结构？

问题描述

这是我关于堆栈溢出的第一篇文章，所以我对 AngularJS 和 ASP.Net 非常陌生，而且对 $rootscope.$emit 有很多问题。从我在线阅读的内容来看，$rootscopes 是父作用域，因此所有暴露在此处的值对所有控制器和模板和作用域都是可见的，并且作用域是控制器内部的函数。似乎您可以通过控制器层次结构“发出”对另一个控制器的调用，方法是使用 $rootscope.$emit("Name of $rootscope.$on function name")$rootscope.$on监听该调用，然后执行其中的任何操作功能。我遇到的麻烦是当我做我的

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

它似乎永远达不到

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

所以问题是我误解了 $emit 或控制器层次结构如何工作，还是我的代码有问题？

我已经尝试过使用 emit 并且在我的 Index.cshtml 文件中的一个按钮调用之后我点击了 indexController.js 文件中的调试器，但是当我进行

$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 中的 (indexController.js)scope.LoadPrintModal 尝试
将“LoadPrintDetails”发送到 $rootscope.%on("LoadPrintDetailsModal",
// printableçontroller.js 中的函数 (event, args)

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

// (printableController.js) 文件 rootScope.on 所在的位置并且应该接收发射

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 文件中点击调试器

标签： htmlcssasp.netangularjs

解决方案

使用$rootScope.$broadcast：

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

该方法在作用域层次结构中$broadcast调度事件。

该$emit方法将事件向上分派。

有关详细信息，请参阅

要捕获广播事件，请使用$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()用于原子事件

在整个应用程序中全局相关的事件（例如用户身份验证或应用程序关闭）。如果您想要特定于模块、服务或小部件的事件，您应该考虑服务、指令控制器或 3rd 方库

  • 直接注入服务和调用方法对于直接通信也很有用
  • 指令能够直接通信

欲了解更多信息，种子

推荐阅读