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>）或作为templateUrl指令定义对象的属性。

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

1 个答案: