コンポーネントを使用してAngularテンプレートをtemplateUrlに置き換えます。

Question

Angular 1.5.7（コンポーネント構造化）を使用していますが、コンポーネントがサーバからロードされている間にローディングhtmlが表示されます。

以下のコードは、私が望むように動作しません。私はのようにローディングhtmlのコードを表示すると、（サーバーから来る）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' 
}); 

Answer 1

まず、（templateUrlを残す）コンポーネント上のテンプレートプロパティを削除します。そして、あなたは、テキスト・フィールドタグ内のロード中に表示したいHTMLを置く

：

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：

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

Answer 2

私はおそらくケーキのように単純なもので始まります