Question

任何人都可以告诉我为什么模式对话框没有在按钮点击时打开？我收到错误消息：“document.getElementById（...）。modal不是函数”。请帮助：）

这是我的HTML：

<body ng-app='ModalDemo'>
    <div ng-controller='MyCtrl'>
        <button ng-click ="open()">Open</button>
        <div class="modal custom-modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="vertical-alignment-helper">
              <div class="modal-dialog custom-modal-dialog vertical-align-center">
                <div class="modal-content custom-modal-content">
                  <div class="modal-body custom-modal-body">
                    <div class="custom-modal-inside">
                      <p>Calculating Rates, Price & Fees ...</p>
                      <p>
                        <img src="ajax-loader.gif">
                      </p>
                     </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</body>

这里是javasript函数open（）：

app = angular.module('ModalDemo', []);
app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.open = function() {
    document.getElementById('myModal').modal({ show: true, backdrop: false, keyboard: false });
  };
}]);

如果用以下代码替换按钮标记，一切正常：

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false" >

但是我需要从javasript函数打开modal，为什么它不起作用呢？

Answer 1

将按钮更改为

<button ng-click ="open()">Open</button>

在jQuery之前包含bootstrap，因为bootstrap取决于jQuery。然后替换

document.getElementById('loanScenarioModal').modal({ show: true, backdrop: false, keyboard: false });

与

jQuery('#myModal').modal({ show: true, backdrop: false, keyboard: false });

小提琴Here。

Answer 2

试试这个Plunker：http://plnkr.co/edit/PPaGgFJbe8QcAU80lNm5?p=preview

这可以使你的模态用法内联Angular方式。

希望这适合你！

HTML：

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      Click to open: <a class="btn btn-primary" ng-click="Open()">Open Modal</a>
    </div>
  </body>

</html>

使用Javascript：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope,$modal) {
  $scope.name = 'World';

  $scope.Open = function(){
    var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: 'confirmmodalController',
                controllerAs: 'confirmmodalCtrl',
                size: 'sm'
            });

            modalInstance.result.then(function () {
                // Ok
            }, function () {
                // Cancel
            });
  }
})
.controller('confirmmodalController', function ($modalInstance) {
    var self = this;

    self.ok = function () {
        $modalInstance.close();
    };

    self.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

模态HTML：

<div class="modal-header">
    <h3 class="modal-title"><i class="fa fa-exclamation-triangle"></i> Confirm</h3>
</div>
<div class="modal-body">
    Modal Text here.....
</div>
<div class="modal-footer">
    <button class="btn btn-danger" ng-click="confirmmodalCtrl.ok()">OK</button>
    <button class="btn btn-default" ng-click="confirmmodalCtrl.cancel()">Cancel</button>
</div>

从javascript打开Bootstrap模式对话框不起作用

2 个答案: