Question

我在我的代码中定义了一个bootstrap 3模式：

   element.on('blur', function() {

     if (ngModel.$viewValue < 5 || ngModel.$viewValue > 200) {
       ngModel.$setViewValue('');
       element.val('');
     }
   });
 }

这是我的角度代码：

<script type="text/ng-template" id="modalTmpl">
    <div class="modal show">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button ng-click="close()" type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </script>
  <div ng-controller="ModalDemoCtrl">
    <modal></modal>
    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
  </div>

当我点击打开我时它没有显示模态:(可能是错误的bootstrap.css参考或其他什么？

plunkr：http://plnkr.co/edit/RhaUdB?p=preview

Answer 1

为什么不通过为您的模型分配modalTmpl ID来尝试此操作

<button class="btn" ng-click="open()" data-toggle="modal" data-target="#modalTmpl">Open me!</button>

Answer 2

在你的模态模板中试试这个：

<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">

然后在控制器中：

$scope.isProductShowing = false;

$scope.currentFullProduct = null;

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

$scope.showFullProduct = function (productId) {
    $scope.isProductShowing = true;
    $scope.currentFullProduct = _.findWhere($scope.products, { id: productId });
}

然后你必须从主模板中触发showFullProduct功能：

<li ng-click="showFullProduct(product.productId)">

Answer 3

此代码存在很多问题。

首先，未定义ModalDemoCtrl。其次，您的开放功能未定义。我将按钮移动到MainCtrl以显示它是如何工作的。并声明open函数将show设置为true，将在ng-show指令

中使用

http://plnkr.co/edit/uP3xB7?p=preview

 <div type="text/ng-template" ng-show="show" id="modalTmpl">
   <!-- Modal box -->
 </div>

  $scope.open = function() {
    $scope.show = true;
  };

为什么我的bootstrap模态没有打开？

3 个答案: