AngularJS自定义Twitter引导模态指令

angularjs custom twitter bootstrap modal directive

本文关键字：模态 指令 自定义 Twitter AngularJS      更新时间：2023-09-26

我正在尝试使用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>

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

基本上在你的指令中，你需要使用引导的标准方法。像这样：

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 函数中看到的那样，您有引导方法。我从中复制解决方案的原始答案可在此处获得：用于自举模态的简单角度指令

相关文章：