angularjs custom twitter bootstrap modal directive

Question

i am trying to create a custom twitter bootstrap modal popup using angularjs Directives. my problem is how can i control the popup from any controller

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Hello Modal</h4>
  </div>
  <div class="modal-body">
    <p>Modal PopUp</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

and the controller directive is

var modal = angular.module('directiveModal', ['ngRoute','ngAnimate']);



modal.directive('loginModal', function() {
  return {
    restrict: 'EA',
    templateUrl: 'directiveTemplate/modal.html',
    link: function(scope,elem,attr)
    {
        elem.bind("click",function()
        {
            console.log("Opening Modal");

        });

    }
  }
});

and this is how i have called directive from the init page

var app = angular.module('myApp', ['ngRoute','ngAnimate','directiveModal']);


app.config(function($routeProvider) 
{

$routeProvider
.when("/",{
    templateUrl : "template/landing.html",
    controller : "landingCtrl"
})

.when("/home",{
    templateUrl : "template/home.html",
    controller : "homeCtrl"
})
.when("/post",{
    templateUrl : "template/post.html",
    controller : "postCtrl"
})


.otherwise(
{
redirectTo: '/'
});


});

How can i control the modal popup in html i have it like this.

<div login-modal></div>

I would like to customize this modal to my need. like if i want have control what text to display. add new elements and call this popup/show on certain conditions are met from the controllers.

Answer 1

Basically inside your directive you need to use standard method from bootstrap. Something like:

link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;

    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
    });

As you can see inside the $watch function you have the bootstrap method. The original answer from which I copied my solution is available here: Simple Angular Directive for Bootstrap Modal