Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
731 views
in Technique[技术] by (71.8m points)

javascript - Broadcasting an event in angular: how to alter flow by subscribing to event?

I have the following logic in my program:

  1. User clicks some button.
  2. Modal dialog appears.
  3. Once it is closed, promise is returned (I am using $modal from angular-bootstrap) and some action happens.

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
      })

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. User clicks some button
  2. $broadcast("aboutToOpenDialog")
  3. a function subscribed to event aboutToOpenDialog is called and makes some decisions and returns a "result".
  4. This "result" somehow returned to code that executed $broadcast (some promise, perhaps).
  5. If "result" is "OK", then open modal dialog, if "result" is "ERROR" - don't proceed.

The code will start looking as:

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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

Example plunker: http://plnkr.co/edit/GjsfoqOLjEAqMzoa8IHp?p=preview

Hope this helps.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...