javascript - 在脚本标签中使用 ng-controller 和 text/ng-template

Question

我正在尝试在脚本标签中使用ng-controller，它是一个模板并且具有ng-template指令 我不知道为什么它现在可以工作

<script type="text/ng-template" id="modal-5" >
<div ng-controller="reserveModalCtrl">
    <div class="modal-header">
        <button type="button" class="close" ng-click="currentModal.close();"
                aria-hidden="true">&times;</button>
        <h4 class="modal-title">Rserve Shortcode</h4>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">

                <div class="form-group">
                    <label for="field-1" class="control-label">Shortcode</label>

                    <input type="text" class="form-control" id="field-1" 
                                 value="30570" disabled>
                </div>

            </div>

            <div class="col-md-6">

                <div class="form-group">
                    <label for="field-2" class="control-label">Company</label>
                    <div id="field-2">
                        <select class="form-control" 
                                ng-model="currentShortCode.companyId">
                            <option ng-repeat="company in companies track by $index" 
                                   value="{{company._id}}"> {{company.companyName 
                                   + ' (' + company.companyLatinName + ')'}}</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <label class="control-label">Until</label>
                <div>
                    <div class="date-and-time">
                        <input type="text" ng-model="currentShortCode.date" 
                               class="form-control datepicker" 
                               data-format="D, dd MM yyyy">
                        <input type="text" ng-model="currentShortCode.time" 
                               class="form-control timepicker" data-template="dropdown" 
                               data-show-seconds="true" data-default-time="11:25 AM" 
                               data-show-meridian="true" data-minute-step="5" 
                               data-second-step="5" />
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-white" 
                ng-click="currentModal.close();">Close</button>
        <button type="button" class="btn btn-info" 
                ng-click="currentModal.dismiss();">Reserve</button>
    </div>
</div>

和我的 Controller

app.controller('reserveModalCtrl', function ($scope, ShortCodeService) {
    $scope.companies    = ShortCodeService.companies;
    $scope.shortCodes   = ShortCodeService.shortCodes;
    $scope.test         = 'test';
});

当我在 div 元素上使用它时，它可以工作，但在本例中不行。

Answer 1

script 的文档指令表示您可以使用它来:

Load the content of a element into $templateCache, so that the template can be used by ngInclude, ngView, or directives. The type of the element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl.

因此，要实际渲染模板，您必须在配置路由器(标准 ngRoute 或 ui-router)时将其映射到路由，或者将其包含在 ngInclude 中(例如 <div ng-include="modal-5"></div> )或作为 templateUrl 属性指令定义对象。