angularjs 自定义 twitter 引导模式指令答案

【问题标题】：angularjs custom twitter bootstrap modal directiveangularjs 自定义 twitter 引导模式指令
【发布时间】：2015-06-14 15:50:58
【问题描述】：

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

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

我想根据我的需要定制这个模式。就像我想控制要显示的文本一样。添加新元素并在控制器满足某些条件时调用此弹出/显示。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angularjs-directive

【解决方案1】：

基本上，在您的指令中，您需要使用引导程序中的标准方法。比如：

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

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

【讨论】：