0

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?

madth3
  • 7,275
  • 12
  • 50
  • 74
csupnig
  • 3,327
  • 1
  • 24
  • 22
  • See [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background). Then go through the [Noob Handbook](https://github.com/angular/angular.js/wiki/Noob-Handbook) for some gotchas, and continue from there. – Stewie Mar 19 '13 at 00:25

1 Answers1

1

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.

Jollymorphic
  • 3,510
  • 16
  • 16