在带有 text/ng-template 的脚本标签中使用 ng-controller

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>

和我的控制器

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

当我在 div 元素上使用它时，它可以工作，但在这种情况下不是。

Answer 1

script 指令的文档说你可以用它来：

将元素的内容加载到 $templateCache 中，以便 ngInclude、ngView 或 指令 使用该模板。元素的类型必须指定为 text/ng-template，并且模板的缓存名称必须通过元素的 id 分配，然后可以用作指令的 templateUrl。

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