控制器和函数如何使用.emit在两个单独的文件之间进行通信,以及如何在AngularJS中区分控制器层次结构?

时间:2019-06-22 21:11:22

标签: html css asp.net 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)scope.LoadPrintModal在尝试尝试的indexController.js中
//将“ LoadPrintDetails”发送到$ rootscope。%on(“ LoadPrintDetailsModal”,
//printableçontroller.js中的函数(事件,参数)

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

2 个答案:

答案 0 :(得分:1)

使用$rootScope.$broadcast

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

$broadcast方法在范围层次结构中 down 调度事件。

$emit方法在层次结构中 up 调度事件。

有关更多信息,请参见


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

     

与整个应用程序全局相关的事件(例如,用户身份验证或应用程序关闭)。如果您想要特定于模块,服务或窗口小部件的事件,则应考虑使用服务,指令控制器或第三方库

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

有关更多信息,请种子

答案 1 :(得分:0)

没有以下内容,很难知道会发生什么:

  1. 查看组件的层次结构。发射组件是否在层次结构中低于捕获组件。 $emit正在发送消息。 $browdcast正在向下发送消息。

  2. 了解如何注入$rootscope

关于2. $rootscope注入为您提供了应用程序的主要$ scope。从中执行$emit不会给我们任何好处,因为$scopes上方没有$rootScope

我猜您想插入$scope,它代表该控制器/组件的层次结构中的特定范围。然后$emiting将向上正确传播到捕获控制器/组件。