使用Components替换Angular模板和templateUrl

时间:2016-11-29 22:35:32

标签: javascript jquery html angularjs

我正在使用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'
});

2 个答案:

答案 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>

http://plnkr.co/edit/zKkNHuSiXwqwxp4p4yup?p=preview