почему мой мод начальной загрузки не открывается?

Question

почему мой мод начальной загрузки не открывается?

0

Я определил bootstrap 3 modal в моем коде:

<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>

Это мой угловой код:

  app.directive('modal', function($log) {
  return {
    restrict: 'E',
    templateUrl: 'modalTmpl',
    link: function(scope, element, attrs) { 
      self.element = element;
      scope.close = function() {
        $log.info('close!');
        var modal = self.element.find('.modal');
        //debugger;
        modal.removeClass('show');
      }

    },
    controller: function($scope, $attrs) {

    }
  };


var ModalDemoCtrl = function ($scope, $log) {

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

  $scope.open = function () {

  };
};

Когда я нажимаю на open me, он не показывает модальность: (Может быть, это неправильная ссылка bootstrap.css или что-то еще?

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

Pindakaas 03 июль 2015, в 08:53

Источник

Теги:

angularjs

twitter-bootstrap-3

3 ответа

Ещё вопросы

geckob · Answer 1 · 2015-07-03T05-03-00.000Z

В этом коде есть много проблем.

Во-первых, ваш ModalDemoCtrl не определен. Во-вторых, ваша открытая функция не определена. Я перемещаю кнопку MainCtrl, чтобы показать, как она работает. И объявите открытую функцию, чтобы установить 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;
  };

Naman Sogani · Answer 2 · 2015-07-03T04-58-00.000Z

Почему бы не попробовать это, назначив modalTmpl id вашей модели

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

Simo Endre · Answer 3 · 2015-07-03T04-14-00.000Z

Попробуйте это в своем модальном шаблоне:

<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)">