以角度广播事件:如何通过订阅事件来改变流程? [英] Broadcasting an event in angular: how to alter flow by subscribing to event?

问题描述

我的程序中具有以下逻辑:

I have the following logic in my program:

1. 用户单击某些按钮.
2. 出现模态对话框.
3. 关闭它后，将返回promise(我正在使用angular-bootstrap中的$ modal)，并且会发生一些操作.

因此它是$ modal的简单调用:

so it is simple call of $modal:

  var modalInstance = $modal.open({
              // here goes modal configuration
            });

  modalInstance.result.then(function (chosenProject) {  
      // some action on data returned from modal
      })

我需要的是在#2之前打开该对话框之前，广播一个事件.订阅该事件的中间"代码应影响#2-3处的操作，即能够阻止执行这些步骤.因此，我愿意制定这样的执行计划:

What I need is to $broadcast an event BEFORE I am about to open that dialog from #2. An "intermediary" code, subscribed to that event, should affect actions at #2-3, namely, be able to prevent execution of these steps. So, I am willing to have such execution plan:

1. 用户单击某些按钮
2. $ broadcast("aboutToOpenDialog")
3. 预订事件aboutToOpenDialog的函数将被调用并做出一些决定并返回结果".
4. 此结果"以某种方式返回执行$ broadcast的代码(也许有些许诺).
5. 如果结果"为确定"，则打开模式对话框，如果结果"为错误"-不要继续.

代码将开始显示为:

  $rootScope.$broadcast("aboutToOpenDialog");

    /// !!! Then I need some function to listen to the event, make decision, return some data,
    /// and I want then use that data to decide, if I open dialog or not: 

  var modalInstance = $modal.open({
              // here goes modal configuration
            });

  modalInstance.result.then(function (chosenProject) {  
      // some action on data returned from modal
      })

我如何使用angular编码这样的事件驱动序列?

How I can code such event-driven sequence using angular?

推荐答案

您可以使用 $ event 对象实现所需的功能.

You could use the $event object to achieve what you want.

广播时，将创建一个 $ event 对象，并将其发送给所有侦听器.在这里，您有机会将所需的任何返回值存储在这样的一个侦听器中(或使用内置的 preventDefault()机制)到 $ event 对象中:

When broadcasting, an $event object will be created and sent along to all listeners. You have a chance here to store any return value you want into the $event object (or using a built-in preventDefault() mechanism) in one of the listeners like this:

$scope.$on('aboutToOpenDialog', function ($event) {
  // you could use built-in preventDefault() and defaultPrevented
  if ($scope.noModal) {
    $event.preventDefault();
  }

  // or just assign any values to some property and get it back later.
  $event.someReturnValue = $scope.noModal ? 'noModal' : 'showModal';
});

当广播结束时， $ broadcast()将返回相同的 $ event 对象，您可以检查该对象上的值.

and when the broadcasting is finished, the $broadcast() will return the same $event object, and you can check values on it.

$scope.openDialog = function() {
  var $event = $rootScope.$broadcast("aboutToOpenDialog");

  if (!$event.defaultPrevented) {
    // $modal.open() here
    console.log('open modal');
  } else {
    console.log('suppress modal');
  }

  // or
  if ($event.someReturnValue === 'showModal') {
    // $modal.open() here
    console.log('open modal again');
  }
};

例子: http://plnkr.co/edit/GjsfoqOLjEAqMzoa8IHp?p =预览

希望这会有所帮助.

这篇关于以角度广播事件:如何通过订阅事件来改变流程?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！