使用 AngularJS 在 Bootstrap 中打开模式窗口答案

【问题标题】：Opening modal window in Bootstrap using AngularJS使用 AngularJS 在 Bootstrap 中打开模式窗口
【发布时间】：2016-01-17 18:18:39
【问题描述】：

我在让它工作时遇到问题。请原谅我的错误，我是 AngularJS 的新手。这是我在主 app.js 中的代码：

angular.module('myApp', ['duScroll', 'emailModal']);

然后，我的 emailModal.module.js 文件中有这段代码：

var mymodal = angular.module('emailModal', []);

mymodal.controller('ModalCtrl', function ($scope) {
    $scope.showModal = false;
    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };
});

mymodal.directive('modal', function () {
    return {
        template: '<div class="modal fade">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
        '<h4 class="modal-title">{{ title }}</h4>' +
        '</div>' +
        '<div class="modal-body" ng-transclude></div>' +
        '</div>' +
        '</div>' +
        '</div>',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        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;
                });
            });
        }
    };
});

在我的索引文件中，在开始的 body 标记之后，我有一个带有控制器的 div：

<body>
<div ng-controller="ModalCtrl" class="container">
  <modal title="Login form" visible="showModal">
    <form role="form">
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </modal>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#Anchor1" du-smooth-scroll du-scrollspy>Anchor 1</a></li>
        <li><a href="#Anchor2" du-smooth-scroll du-scrollspy>Anchor 2</a></li>
        <li><a href="#Anchor3" du-smooth-scroll du-scrollspy>Anchor 3</a></li>
      </ul>
    <div class="navbar-brand img-responsive">
      <img src="assets/img/logo_menu_blank.png" />
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="" ng-click="toggleModal()">Open Modal</a> </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>
</div>

我已经尝试了所有可能的组合，但无法完成这项工作。

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap modal-dialog

【解决方案1】：

看看 UI Bootstrap：

https://angular-ui.github.io/bootstrap/#/modal

这是一个库，可让您以简单干净的方式将 Bootstrap 与 Angular 结合使用。

更新

在您学习 Angular 时，我决定仔细查看您的代码并运行它。实际上，它正在工作。我唯一改变的是没有将“duScroll”模块添加到应用程序中。

您一定忘记了一些细节...您是否在 html 根元素中添加了ng-app="myApp"？你检查浏览器控制台是否给你任何错误？

【讨论】：

ng-app 被添加到 html 中，duScroll 正在处理我的锚导航，因为它是一个单页应用程序。我遇到的另一个问题是模式始终可见，就在我的导航下方。完全没有隐藏起来。