angularjs自定义twitter bootstrap模态指令

我正在尝试使用angularjs指令创建自定义twitter引导模式弹出。我的问题是如何从任何控制器angularjs自定义twitter bootstrap模态指令

<!-- 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>

控制弹出和控制器指令是

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"); 

     }); 

    } 
    } 
});

，这是我怎么也叫来自初始页面的指令

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: '/' 
}); 


});

我如何控制HTML中的模态弹出菜单我喜欢这样。

<div login-modal></div>

我想定制这种模式到我的需要。就像我想要控制显示的文本一样。添加新元素并在特定条件下调用此弹出菜单/显示从控制器中满足。

来源

2015-06-14 Siddharth

基本上在你的指令中，你需要使用bootstrap的标准方法。喜欢的东西：

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; 
     }); 
    });

正如你可以有你的引导方法$表函数中看到的。我从中复制我的解决方案的原始答案可在此处获得： Simple Angular Directive for Bootstrap Modal

来源

2015-06-14 19:56:36 LucaApo

angularjs自定义twitter bootstrap模态指令

回答

相关问题