angularjs modal直接显示内容?

时间:2013-09-09 09:29:43

标签: javascript twitter-bootstrap angularjs modal-dialog

我是angularjs的新手

我想使用modal和bootstrap

但对我的网页没有任何影响

并且没有错误消息

这是我的代码

<div ng-controller="MainCtrl">
<button class="btn" ng-click="open()">Open me!</button>
<div modal="shouldBeOpen" close="close()" options="opts">
    <div class="modal-header">
        <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
        <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
    </div>
</div>

'use strict';

angular.module('yeomanContactsAppApp')
  .controller('MainCtrl', function ($scope) {
   $scope.open = function () {
      $scope.shouldBeOpen = true;
    };

$scope.close = function () {
  $scope.closeMsg = 'I was closed at: ' + new Date();
  $scope.shouldBeOpen = false;
};

$scope.items = ['item1', 'item2'];

$scope.opts = {
  backdropFade: true,
  dialogFade:true
};});

它导致直接显示模态内容,而不是单击按钮来显示模态? 我很困惑,请帮忙

非常感谢!

1 个答案:

答案 0 :(得分:0)

您使用的是哪个bootstrap版本?如果html是完整的bootstrap,你看起来就像缺少一些部分,比如role ='dialog'等。

默认设置$scope.shouldBeOpen为false,然后在您的函数中切换它。然后我不应该直接打开。

angular.module('yeomanContactsAppApp')
  .controller('MainCtrl', function ($scope) {
   $scope.shouldBeOpen = false;
...
});

脚本工作正常可能是错误的html。我使用带有自举的角度没有任何麻烦。