current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

I am trying to open the modal dialog from javascript when a certain condition is met. The example shown here http://angular-ui.github.io/bootstrap/ invokes the modal on ng-click.

How do I achieve showing modal when a certain condition is met?

Thanks

Additional Info

Sorry didn't mean to create confusion. I am going to clarify a little bit more by saying what I meant by "certain condition". The scenario is the user will search for customer by name and will get a list of customers back matching with the search string. The user then clicks on any one of the customer row to get more detail information.

When clicked the code control is handed off to Controller (It's an ASP.Net MVC app) which will then go through other classes and finally get data of the customer from database. It will then populate a boolean property called spouseNotFound. It then returns the JSON back to angularjs controller. Now assume that if this particular customer does not have spouse I want to show a modal saying that "Spouse not found".

So, no, I don't want the modal to be invoked on an event, rather than on business rule condition.

Hope that helps to understand things clearly.

share|improve this question
1  
Have you done any work on your own, they have examples of this on their documentation site? plnkr.co/edit/?p=preview –  Nix Jan 10 '14 at 1:52
2  
This question appears to be off-topic because isn't an issue, its just laziness. –  Nix Jan 10 '14 at 1:57
    
Please read the actual question, Nix. The user is asking how to launch the modal when a condition is met. Therein lies the answer to the question. Not a problem with angular-ui-bootstrap, but angular itself. Get off your 20k horse. –  C Fairweather Jan 10 '14 at 6:40
    
@CFairweather click event is a condition (if click then ...), so OP's question does indeed show lack of any substantial effort. –  Stewie Jan 10 '14 at 8:42
    
Click is an event. ($scope.prop1 && $scope.prop2) is more appropriately described as a condition. Normally the click EVENT would drive the opening of the modal. He even says "The example shown here angular-ui.github.io/bootstrap invokes the modal on ng-click," as in, "I see this documentation here, but I'm not certain how to apply to my case." –  C Fairweather Jan 10 '14 at 17:15

3 Answers 3

up vote 4 down vote

Straight from the documentation.

$modal is a service to quickly create AngularJS-powered modal windows. Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.

Example plnkr. (http://plnkr.co/edit/?p=preview)

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});
share|improve this answer
up vote 1 down vote

What you may be looking for is a $watch on your scope. This will allow you to monitor a variable, and when the value is what you want, then launch the modal as Nix describes.

   $scope.$watch('entities', function(){
      if($scope.entities[0].checked && $scope.entities[1].checked){
          alert("If I were bootstrap, I'd be launching a modal right now!");
      };
   }, true);

A jsfiddle: http://jsfiddle.net/HB7LU/1636/

share|improve this answer
    
C FairWeather I am going to try your suggestion and will let you know soon. Thanks –  Josh Jan 11 '14 at 7:02
up vote 0 down vote

If anyone needs an easy approach to showing Bootstrap Modals with AngularJS, then you can simply use the following approach. It worked well for me:

var element = angular.element('#myModal');

// Open dialog
element.modal('show');

// Close dialog
element.modal('hide');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.