CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Rahul
Rahul

Reputation: 450

Open bootstrap popup from angular controller

In angular Template I have two anchors,first display text inside popoup and second one display images inside popup,Like this:

<a ng-click="openPopup('Text')">Text popup</a><a ng-click="openPopup('Image')">Image popup</a>

I have a two different popup's for Text and Images.I want to open text popup if user click "Text popup". Same like Image. Here is the sample text and Image popup code.

    <div class="modal fade" id="myTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>
    <div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                //Content goes here
             </div>
    </div>

In controller: 

    $scope.openPopup = function(Value) {
            if(Value=='Text'){
                //open Text popup
            }else{
                //open Image popup
            }
       }

I am using ui.bootstrap.modal How can I achieve this?

Upvotes: 3

Views: 3894

Answers (4)

ibrahimbayer
ibrahimbayer

Reputation: 262

You can assign a ng-hide or ng-show property to your modal html code 

<div ng-show="showModal">

then all you have to do is swithcing the $scope.showModal to true whenever you want to show your modal screen and false to hide it.

another method is using angular-ui dependency and use $modal property which is based on bootstrap.

https://angular-ui.github.io/bootstrap/#/modal

Upvotes: 0

Rahul
Rahul

Reputation: 450

Thanks guys for replying. I just found my answer. This is how we can achieve.

$scope.openPopup = function(Value) {
        var elementText = angular.element('#myTextModal');
        var elementImage = angular.element('#myImageModal');
            if(Value=='Text'){
                elementText.modal('show');
            }else{
                elementImage.modal('show');
            }
       }

Upvotes: -1

Jenson Raby
Jenson Raby

Reputation: 789

save both the modals to two html file and use this to open pop up 

$scope.openPopup = function(Value) {
        if(Value=='Text'){
            $scope.modalInstance = $modal.open({
                templateUrl: 'views/text.html',
                scope: $scope
            });
        }else{
                $scope.modalInstance = $modal.open({
                templateUrl: 'views/image.html',
                scope: $scope
            });
        }
   }

Upvotes: 3

LeadsArchive
LeadsArchive

Reputation: 46

You can open modals like this

$scope.openPopup = function(Value) {
        if(Value=='Text'){
            $("myTextModal").modal("show");
        }else{
            $("myImageModal").modal("show");
        }
   }

Bootstrap JS Modal

Upvotes: 2

Related Questions