2

HTML

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}}">loading...</span>

JS

setTimeout(function(){
   $scope.$apply(function(){
     $scope.scopeProperty1 = "Mr."
     $scope.scopeProperty2 = "Mark Rajcok"
   })
}, 1000);

これを試してみましたが、最初の「読み込み中...」というテキストが画面に表示されません。タイムアウトを使用して、scopeProperty1、scopeProperty2 を設定しました。プロパティはタイムアウト後に表示され、それまでは「読み込み中...」テキストの代わりに空のスペースが表示されます

4

1 に答える 1

4

このng-bind-tremplate属性は、最初のループで internal をオーバーライドします。text$digest

これを回避する方法はいくつかあります。テキスト内で演算子をng-cloak巧みに使用する、フラグを追加してそれに基づいて/を使用するなどです。ortemplateng-showng-hide

三項演算子の使用

貧乏人の三項演算子を使用した例:

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}} {{(!scopeProperty1 && !scopeProperty2) && 'Loading ...' || ''}}"></span>

以下は、同じ原理を使用した実際の例です: http://plnkr.co/edit/Wa38wwxuuE2WWYeEtCOA?p=preview

NG-マント

ソリューションには別の要素ng-cloakが必要です:html

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}}">
    <span ng-cloak>Loading ...</span>
</span>

ただし、内部に他の要素 (タグng-bind-templateなど) を許可しない場所で使用している場合、これは問題を引き起こします。optionその場合、このタスクを実行するには、巧妙な CSS または計算されたプロパティが必要になります。IE の回避策については、ドキュメントを参照してください。

于 2013-10-26T19:43:13.083 に答える