在Angularjs的html5mode中使用Bootstrap 3 modal

Question

在html5Mode(true)中使用Bootstrap Modal。

點擊launch demo modal在第1次點擊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管理着這一點。同樣，在第二次點擊時，角度管理REST請求，並顯示模式。

PS： - 我想證明問題，但plunkr在html5Mode中不起作用。

而我無法添加額外的HTML頁面到jsfiddle據我所知，你不能。除了我不確定它是否支持$locationProvider.html5Mode(true);模式。

我該去哪裏證明錯誤？

Answer 1

這裏是plunker：http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview

它不使用數據肘節屬性如在自舉的例子，但代替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> 

模態。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; 
}