我正在使用Angular 1.5.7(组件结构),并希望在从服务器加载组件时显示一些加载html 。
以下代码无法正常工作。我将喜欢下面显示的加载html 代码,以显示UNTIL templateUrl html(来自服务器)加载。加载服务器端html后,替换加载html 。
这可能吗?
<div class="card field-loading">
<div class="card-body">
<div class="loading-text-3"></div>
<div class="loading-text-10"></div>
<div class="loading-text-4"></div>
</div>
</div>
HTML
<text-field ng-show="field.type === 'Text'"
presenter="vm" form-name="fieldSettingsModel"
sidebar-item="true" design-mode="false" field="field">
</text-field>
JS
angular
.module('app.forms.fields.basic')
.component('textField',
{
require: {
'app': '^mainApp'
},
bindings: {
field: '=',
formName: '@',
designMode: '<',
presenter: '=',
mapTo: '<',
sidebarItem: '<'
},
template:`<div class="card field-loading">
<div class="card-body">
<div class="loading-text-3"></div>
<div class="loading-text-10"></div>
<div class="loading-text-4"></div>
</div>
</div>`,
templateUrl: ['appSettings', appSettings => ('ng/routeArea/FieldTemplate/Text?v=' + appSettings.version)],
controller: TextFieldComponent,
controllerAs: 'vm'
});
答案 0 :(得分:0)
首先,删除组件上的模板属性(保留templateUrl)。
然后在文本字段标记内加载要显示的html:
<text-field ng-show="field.type === 'Text'"
presenter="vm" form-name="fieldSettingsModel"
sidebar-item="true" design-mode="false" field="field">
<div class="card field-loading">
<div class="card-body">
<div class="loading-text-3"></div>
<div class="loading-text-10"></div>
<div class="loading-text-4"></div>
</div>
</div>
</text-field>
答案 1 :(得分:0)
我可能会从简单的蛋糕开始:
bindings: {
templateUrl: '<'
}
<div>
<div ng-if="!vm.loaded">
Loading...
</div>
<div ng-include="vm.templateUrl" onload="vm.loaded = true">
</div>