1

で Bootstrap Modal を使用するhtml5Mode(true)。

最初のクリックでクリックすると、モーダルlaunch demo modalへの URL の変更は表示され/#myModalません。

もう一度クリックするとlaunch demo modal、モーダルが表示されます。

通常モード ($locationProvider.html5Mode(false);モーダルは最初のクリックで表示されます。

最初のクリックでモーダルを表示するにはどうすればよいですか?

標準モーダルコード:-

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-body">
          ...
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

角度コード:-

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/', {
        templateUrl: 'partials/home',
        controller: 'homePage'
      }).
      otherwise({redirectTo: '/login'});

    $locationProvider.html5Mode(true);
}]);

検査すると、最初のクリックでページが更新されますlaunch demo modalが、サーバーを介して更新は行われません。Angular はそれを管理します。同様に、2 回目のクリックでも、angular が REST リクエストを管理し、モーダルを表示します。

PS:- 問題を実証したかったのですが、plunkrは html5Modeでは動作しません。

そして、私が知る限り、追加のhtmlページをjsfiddleに追加できませんでした。$locationProvider.html5Mode(true);また、モードをサポートしているかどうかもわかりません。

エラーを示すにはどこに行けばよいですか?

4

1 に答える 1

19

これがプランカーです: http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview

Bootstrap の例のように data-toggle 属性を使用していませんが、代わりにng-clickモーダルをインスタンス化するコントローラーの関数をトリガーするディレクティブを使用しています。

Bootstrap のモーダルの例 ( Bootstrap Modal Live Demo )を直接使用し、AngularUI の JavaScript の例 ( AngularUI Modal Demo ) に適応させました。

使用バージョン

  • AngularJS 1.0.8
  • AngularUI 0.6.0
  • ブートストラップ 3.0.0

結果

ここに画像の説明を入力

index.html (部分)

<div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

modal.html

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" ng-click="cancel()">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
          <a ng-click="selected.item=item">{{item}}</a>
        </li>
      </ul>
      <div>Selected Item: {{selected.item}}</div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
      <button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

app.js

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

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

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

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'modal.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

また、モーダル可視性のための小さな CSS 修正があります。

.modal {
    display: block;
}
于 2013-10-05T23:05:06.267 に答える