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模態指令

回答

相關問題