javascript - AngularJS modal not displayed when using partial for templateURL - Stack Overflow

admin管理员组

文章数量:1321445

I have a modal in a partial file that is loaded into my main view with an ng-include tag, but the template isn't found. I don't see the template being loaded in console or the console network tab. I get the following message: Error: [$pile:tpload] Failed to load template: rxsignalUpdateModal.html

controller:

$scope.open = function (size) {

    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'rxsignalUpdateModal.html',
        controller: 'ModalInstanceCtrl',
        size: size
    });
};

view:

<div class="col-md-12 col-lg-12">
    <div class="h4 invisible"></div>
    <div class="rxsignal-chart-bubble" ui-view="rxsignal-chart-bubble"></div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
            <span class="text-muted panel-title">
                {{ Drug.aedrug_name | pascalCaseFilter }} RxSignal
            </span>
                    <button class="btn btn-info btn-mini restoreSortButton pull-right"
                            ng-click="clearLocalStorage()"
                            popover-append-to-body="true" popover-trigger="mouseenter"
                            popover-placement="top" popover="Reload grid with default sorting order">
                        Restore Default Settings
                    </button>
                    <span id="rxsignal-filter-view" ui-view="rxsignal-filter"></span>
                </div>
                <div class="gridStyle" ng-grid="drugRxsignal.options" id="portfolio-rxsignal-grid"></div>
            </div>
        </div>
    </div>
</div>

<div ng-include="app/drug/partials/drug.rxsignal.update.modal.html"></div>

partial:

<!-- modal -->
<h1> test </h1>
<script type="text/ng-template" id="rxsignalUpdateModal.html">
    <div class="modal-header">
        <h3 class="modal-title letter-title">Modal Title</h3>
    </div>
    <div class="modal-body">
        <div class="letter-body">
            <p>text</p>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="cancel()">OK</button>
    </div>
</script>
<!-- end modal -->

I have a modal in a partial file that is loaded into my main view with an ng-include tag, but the template isn't found. I don't see the template being loaded in console or the console network tab. I get the following message: Error: [$pile:tpload] Failed to load template: rxsignalUpdateModal.html

controller:

$scope.open = function (size) {

    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'rxsignalUpdateModal.html',
        controller: 'ModalInstanceCtrl',
        size: size
    });
};

view:

<div class="col-md-12 col-lg-12">
    <div class="h4 invisible"></div>
    <div class="rxsignal-chart-bubble" ui-view="rxsignal-chart-bubble"></div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
            <span class="text-muted panel-title">
                {{ Drug.aedrug_name | pascalCaseFilter }} RxSignal
            </span>
                    <button class="btn btn-info btn-mini restoreSortButton pull-right"
                            ng-click="clearLocalStorage()"
                            popover-append-to-body="true" popover-trigger="mouseenter"
                            popover-placement="top" popover="Reload grid with default sorting order">
                        Restore Default Settings
                    </button>
                    <span id="rxsignal-filter-view" ui-view="rxsignal-filter"></span>
                </div>
                <div class="gridStyle" ng-grid="drugRxsignal.options" id="portfolio-rxsignal-grid"></div>
            </div>
        </div>
    </div>
</div>

<div ng-include="app/drug/partials/drug.rxsignal.update.modal.html"></div>

partial:

<!-- modal -->
<h1> test </h1>
<script type="text/ng-template" id="rxsignalUpdateModal.html">
    <div class="modal-header">
        <h3 class="modal-title letter-title">Modal Title</h3>
    </div>
    <div class="modal-body">
        <div class="letter-body">
            <p>text</p>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="cancel()">OK</button>
    </div>
</script>
<!-- end modal -->

• javascript
• angularjs
• angularjs-ng-include
• angular-bootstrap

Share Improve this question Follow asked Aug 27, 2015 at 23:28 Daniel BogartDaniel Bogart 1,29533 gold badges1818 silver badges4343 bronze badges 3

• 3 Your ng-include attribute value should be a string, ie ng-include="'app/drug/partials/drug.rxsignal.update.modal.html'" (note the nested quotes) – Phil Commented Aug 27, 2015 at 23:31
• thanks, fixed that, now getting the error: GET localhost:9001/rxsignalUpdateModal.html 404 (Not Found), and error Error: [$pile:tpload] Failed to load template: rxsignalUpdateModal.html. is my path wrong? the modal partial is in the same directory as the view. – Daniel Bogart Commented Aug 28, 2015 at 14:40
• Have you tried adding a leading '/' to the id: '/rxsignalUpdateModal.html'? – cerd Commented Aug 28, 2015 at 14:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The solution required a few changes. I removed the ng-include code, and simply added the full path in the modal instance object:

            var modalInstance = $modal.open({
                animation: true,
                templateUrl: 'app/mon/partials/rxsignal-update-modal.html',
                controller: 'ModalInstanceCtrl',
                size: size
            });

Then, in the template partial, I removed the script tags so that it was just html.

The script/template element (text/ng-template) requires a leading '/' or other path on the id attribute for it to work properly.

Right: <script type='text/ng-template' id='/my-template.html'>

Wrong: <script type='text/ng-template' id='my-template.html'>

See plunkr: http://plnkr.co/edit/BA26CP?p=preview

Angular docs for script:

https://code.angularjs/1.3.18/docs/api/ng/directive/script

本文标签： javascriptAngularJS modal not displayed when using partial for templateURLStack Overflow