angularjs - 在 AngularJs 中使用 $templateCache 的更好方法？

Question

我正在处理一些旧的 AngularJs 代码（1.2），需要进行一些更改。令我沮丧的一件事是自由使用 $templateCache 通过字符串连接将整个网页放入缓存中。

这意味着在整个这个非常大的项目中，我有数百行这样的：

$templateCache.put("app/mapping/AddFarmField/MassImportWizard.tpl.html", '<div class="panel panel-default" ng-show="currentStep.value == \'select_rlg\'">\n' + '    <div class="panel-heading" id="panel-heading" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Select Location or Grower</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelRlgSelection()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onSelectRlg()"><span class="glyphicon glyphicon-ok green-icon" aria-hidden="true" ></span> Select</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body" og-rlgff="rlgffOptions" template-url="tpl.rlgffVertical.html">\n' + "    </div>\n" + "\n" + "</div>\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'upload_file\'">\n' + '    <div class="panel-heading" id="panel-heading2" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Shapefile Upload</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelFileUpload()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onUploadButtonClicked()"><span class="glyphicon glyphicon-upload green-icon" aria-hidden="true" ></span> Upload</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div class="row">\n' + '            <div class="col-lg-12">\n' + '                <div class="input-group">\n' + '                    <span class="input-group-btn">\n' + '                        <button class="btn btn-default" ng-file-select ng-model="selectedFiles" ng-file-change="onFileSelected($files, $event)" ng-multiple="false">Browse...</button>\n' + "                    </span>\n" + '                    <div class="form-control">\n' + "                        {{getSelectedFileName()}}\n" + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "\n" + '        <div class="row">\n' + '            <div class="col-sm-12">\n' + '                <div class="progress" ng-show="selectedFiles[0].progress > 0">\n' + '                    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"\n' + '                         ng-attr-aria-valuenow="{{selectedFiles[0].progress}}"\n' + '                         ng-attr-style="width: {{selectedFiles[0].progress}}%;"\n' + "                         ng-class=\"{ 'progress-bar-danger': selectedFiles[0].upload.aborted || selectedFiles[0].upload.failed, 'active': selectedFiles[0].upload.active, 'progress-bar-striped': selectedFiles[0].upload.active }\">\n" + "                        {{selectedFiles[0].progress}}%\n" + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + "</div>\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'map_columns\'">\n' + '    <div class="panel-heading" id="panel-heading3" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Shapefile Column Mapping</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelMapColumns()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onMapColumnsButtonClicked()"><span class="glyphicon glyphicon-floppy-disk green-icon" aria-hidden="true" ></span> Submit</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div class="form-horizontal">\n' + "\n" + '            <div class="form-group col-sm-offset-1" ng-show="shouldMapGrowerColumn">\n' + '                <label class="col-sm-3 control-label" for="growerNameSelector">Grower name</label>\n' + '                <div class="col-sm-8" id="growerNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.grower"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Grower Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + '                        <label class="col-sm-3 control-label" for="growerNameSelector">Grower name</label>\n' + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + '            <div class="form-group col-sm-offset-1">\n' + '                <label class="col-sm-3 control-label" for="farmNameSelector">Farm name</label>\n' + '                <div class="col-sm-8" id="farmNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.farm"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Farm Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + '            <div class="form-group col-sm-offset-1">\n' + '                <label class="col-sm-3 control-label" for="fieldNameSelector">Field name</label>\n' + '                <div class="col-sm-8" id="fieldNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.field"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Field Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + "        </div>\n" + "    </div>\n" + "\n" + "</div>\n" + "\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'show_conflicts\'">\n' + '    <div class="panel-heading">\n' + "        These fields were not imported:\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div ag-grid="gridConflicts" class="ag-fresh" style="width: 100%; height: 220px;"></div>\n' + "    </div>\n" + "\n" + '    <div class="panel-footer clearfix">\n' + '        <div class="pull-right">\n' + '            <button class="btn btn-default" ng-click="onConflictsDone()">Done</button>\n' + "        </div>\n" + "    </div>\n" + "</div>");

因此，一长行代码基本上是由串联字符串组成的整个网页。

开发人员是否可以直接指向一个实际的文件，而不是插入一堆串联的字符串？像这样：

$templateCache.put("test.html","templateTest.html");

到目前为止，我从来没有使用过 $templateCache，所以我不太确定我所问的是否可行。尤其是在这个旧版本的 AngularJs 中。

标签： angularjs

Answer 1

您可以使用脚本标签，

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

从 docs 来看，包含模板的 script 标签不需要包含在文档的头部，但它必须是 $rootElement 的后代（IE，具有 ng-app 属性的元素），否则模板将被忽略.

要稍后检索模板，

$templateCache.get('templateId.html')

同样在 1.3.0 版本中，您可以使用$templateRequest（它允许您加载模板 url 并将内容存储在 中$templateCache），

$templateRequest('template.html').then(function(html){
  // Convert the html to an actual DOM node
  var template = angular.element(html);
  // Append it to the directive element
  $element.append(template);
  // And let Angular $compile it
  $compile(template)($scope);
});

检查此链接，我发现它非常有用。我希望它有所帮助。