CODEWITHSUNDEEP
jquerytwitter-bootstrapangularjs
csupnig
csupnig

Reputation: 3377

AngularJS bootstrap dialog reopen issue

I am using a bootstrap dialog to edit and create new elements. The function to open the dialog for creating a new element is invoked from a jQuery click handler, since this is being done by a 3rd party lib.

The function to open the dialog for editing an element is called via a directive.

Opening the dialog via the directive works fine every time. Also opening the dialog via the jQuery click handler works fine the first time, but when I close the dialog and try to open it again via the click handler it will not be opened until a click on the button with the directive is made and then both (the edit and the new item) dialogs are opened.

I made a simplified example here: http://plnkr.co/edit/HGvrqH?p=preview

What am I doing wrong?

Upvotes: 0

Views: 658

Answers (1)

Jollymorphic
Jollymorphic

Reputation: 3530

You need to wrap your transition from Earth to Oz in a $scope.$apply call:

window.newItem = function(){
  $scope.$apply(function () {
    $scope.newItem();
  });
};

If you look at the Angular UI Boostrap Dialog source, you might notice some promise-based state management, such as the stuff surrounding template loading around line 229. Notice how you will fall into different async behaviors there, depending on whether you've loaded your template or not (a condition that changes after the first time you press the button). The documentation for $q nicely illustrates the need to place such activity inside Angular's digest loop through the use of $apply.

Upvotes: 1

Related Questions