Question

我在解决此问题时遇到了问题。请原谅我的错误，我在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>

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

Answer 1

看看UI Bootstrap：

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

它是一个库，可让您以简单干净的方式使用带有Angular的Bootstrap。

<强>更新

当你正在学习Angular时，我决定仔细研究你的代码并运行它。实际上，它正在发挥作用。我唯一改变的是不添加＆＃39; duScroll＆＃39;模块到应用程序。

您一定忘记了一些细节......您是否已将ng-app="myApp"添加到html根元素？您是否检查过浏览器控制台是否显示错误？

使用AngularJS在Bootstrap中打开模态窗口

1 个答案: