CODEWITHSUNDEEP
angularjsangular-strap
HS1
HS1

Reputation: 658

angular strap modal is not showing html template

this is the modal button: 

<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-scale" data-template="templates/AddNewItem.tpl.html" bs-modal="modal">
                    Custom Modal
                    <br>
                    <small>(using data-template)</small>
                </button>

in the folder 'templates' I have the "AddNewItem.tml.html" (I also checked in the "network" tab of google chrome developer tools, that it founds the file).

the "AddNewItem.tml.html" is built as instructed here. this is how it looks:

<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">My Title</h4>
        </div>
        <div class="modal-body" ng-bind="content">
            My Content

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
        </div>
    </div>
</div>

when I press the button, I get an empty modal dialog without any content.

plnkr

Upvotes: 0

Views: 1223

Answers (1)

hakanostrom
hakanostrom

Reputation: 1081

A bit late answered, but here it goes.
The bs-modal tag in html must reference an object in the controller.

myApp.controller('modalController', function($scope){
  $scope.modal = {
    "title": "Title",
    "content": "Hello Modal. This is a custom message!"
  };
});

Upvotes: 1

Related Questions