Question

我的程序中有以下逻辑：

用户点击某个按钮。
出现模态对话框。
关闭后，将返回promise（我使用angular-bootstrap中的$ modal）并执行一些操作。

所以这是$ modal的简单调用：

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

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

我需要的是在我打算从＃2打开该对话框之前播放一个事件。一个＆＃34;中介＆＃34;订阅该事件的代码应该影响＃2-3的操作，即能够阻止执行这些步骤。所以，我愿意有这样的执行计划：

用户点击某个按钮
$广播（＆＃34; aboutToOpenDialog＆＃34）
调用订阅事件aboutToOpenDialog的函数并做出一些决定并返回＆＃34;结果＆＃34;。
这个＆＃34;结果＆＃34;不知怎的，回到执行$ broadcast的代码（也许还有一些承诺）。
如果＆＃34;结果＆＃34;然后打开模态对话框，如果＆＃34;结果＆＃34;是＆＃34;错误＆＃34; - 不要继续。

代码将开始显示为：

  $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？

Answer 1

您可以使用$event对象来实现您想要的目标。

广播时，将创建$event对象并将其发送给所有听众。您有机会在其中一个侦听器中将所需的任何返回值存储到$event对象中（或使用内置的preventDefault()机制），如下所示：

$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对象，您可以检查其中的值。

$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');
  }
};

示例plunker： http://plnkr.co/edit/GjsfoqOLjEAqMzoa8IHp?p=preview

希望这有帮助。

以角度广播事件：如何通过订阅事件来改变流程？

1 个答案: