CODEWITHSUNDEEP
javascriptasp.netangularjs
Bob Horn
Bob Horn

Reputation: 34297

Angular Modal Only Works Within Index.html

My angular modal is working:

enter image description here

However, to get it to work, the modal script has to be within my index.html:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

And this is the call in the controller to it:

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

If I create an HTML file and put that above modal script in it, the modal stops showing up. (The page still gets grayed-out but there is no modal.) I've tried putting the HTML file in the root folder (right next to index.html) and I've had it in a separate folder, but it just won't show up. When I try to use this separate file, I change the templateUrl property of the call:

'app/partials/recipeAdd.html'

And I change the ID in the HTML:

<script type="text/ng-template" id="app/partials/recipeAdd.html">

What am I missing?

Upvotes: 1

Views: 123

Answers (1)

charlietfl
charlietfl

Reputation: 171669

The problem is using a template script tag to wrap the html in the remote template file.

When angular is provided a templateUrl it will look in $templateCache for a matching entry which will also be populated by ng-template script tags found in main page as well. If none found it will make an ajax call and expects raw html returned.

This newly acquired template will also be cached in $templateCache so further ajax calls are not needed to re-use it

Upvotes: 2

Related Questions