Bootstrap 3 modal in html5mode in Angularjs

Question

Using Bootstrap Modal in html5Mode(true).

On clicking launch demo modal upon 1st click the url changes to /#myModal modal does not appear.

Upon clicking again launch demo modal the modal appears.

In normal mode ($locationProvider.html5Mode(false); the modal appears on the first click.

How do i make the Modal appear in the first click?

standard modal code:-

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

Angular code :-

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);
}]);

Upon inspection the page refreshes on the first click of launch demo modal but the refresh does not take place thru server. Angular manages that. Similarly upon the second click too, angular manages the REST request, and shows the modal.

PS:- I wanted to demonstrate the problem but plunkr does not work in html5Mode.

And I couldn't add additional html page to jsfiddle so far as i can tell, you can't. Besides i'm not sure if it supports $locationProvider.html5Mode(true); mode.

Where do i go to demonstrate errors ?

Answer 1

Here is the plunker: http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview

It is not using the data-toggle attribute as in the Bootstrap example, but instead an ng-click directive to trigger a function in the controller which instantiate the modal.

I used the modal example directly from Bootstrap (Bootstrap Modal Live Demo), and adapted it for the javascript example from AngularUI (AngularUI Modal Demo).

Versions used

• AngularJS 1.0.8
• AngularUI 0.6.0
• Bootstrap 3.0.0

Result

index.html (partial)

<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');
  };
};

Also, there is a small css fix for the modal visibility.

.modal {
    display: block;
}