Angular -Strap Modal does not load the template

Question

For some reason, the modal block works fine, but it does not load any templates that I specify.

My controller has this code;

var brnSearchModal = $modal({ scope: $scope, template: "app/rrn/searchBrn.html", contentTemplate: false, html: true, show: false }); $scope.showModal = function () { brnSearchModal.$promise.then(brnSearchModal.show); }; 

My HTML looks like this:

 <button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top"> BRN Lookup </button> 

And my template is in the file and looks like this:

 <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" ng-show="title"> <button type="button" class="close" ng-click="$hide()">&times;</button> <h4 class="modal-title" ng-bind="title">Hello, World!</h4> </div> <div class="modal-body" ng-bind="content">Lorem ipsum dolor.</div> <div class="modal-footer"> <button type="button" class="btn btn-default" ng-click="$hide()">Close</button> </div> </div> </div> </div> 

There is no mistake. Everything seems to be working fine, but the template is not loading. If I debug angular -strap at some point, the template loads, but then disappears and leaves an empty modal.

Answer 1

Remove ng-show="title" , ng-bind="title" from the template.

Answer 2

Try adding the bs-modal attribute: see examples

 <button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" bs-modal="brnSearchModal"> BRN Lookup </button> 

Otherwise, use the data-template attribute directly, without using JS to display the modality:

 <button type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" data-template="app/rrn/searchBrn.html" bs-modal="modal"> BRN Lookup </button> 

I think that when you put bs-modal="modal" modal is somehow predefined in the angular -strap library.

Answer 3

you should remove ng-show="title ", ng-show="content" or ng-bind="title" from the template. Make sure the template does not have ng-show .