AngularJSビデオでは、ある時点で、JavaScriptが解析する前に式が表示されないようにする方法を見ました。しかし、私はそれがどのように行われたか覚えていません...ページに表示されている表現の回避
私は<div id='message'>{{$root.initializing.status}}</div>私はAngularJSがそれを解析する機会を持っている前に "読み込み中..."と言いたいと思います。これはどうすればできますか？
他にも言及したように、ng-cloakを使用しますが、あなたのページに最初に読み込まれた場合は、CSSに次の行を追加してください。
[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}
これにより、divテンプレートが確実に非表示になります。そのdivテンプレートの下に、
のようなものを追加してロードしています。$ root.initializing.statusを代入すると、ng-hideに真の値が設定されます。ここで
はjsfiddleで、次のコードです：
HTML：
<div ng-controller='Ctrl'>
<div id='message'>{{$root.initializing.status}}</div>
<div ng-hide="$root.initializing.status">Loading...</div>
</div>
JS：ページのロードのちらつきを避けるために
function Ctrl($timeout, $scope) {
///simulating loading
$timeout(function() {
$scope.$root = {
initializing: {
status: 'Complete!'
}
}
}, 2000);
}
使用NG-マントhttp://docs.angularjs.org/api/ng.directive:ngCloak
<div id="template1" ng-cloak>{{ 'hello' }}</div>
またはNG-バインドhttp://docs.angularjs.org/api/ng.directive:ngBind
Hello <span ng-bind="name"></span>!
あなたはこの回答を参照してくださいngCloakとの表現を非表示にすることができます：
ローディングの表示に関しては、$ root.initializing.statusをデフォルト値の "Loading"に設定し、データを取得したときにリセットすることができます。
で動作しません。私はまだページ上に '{{myvar}}'が点滅しています。 – Webnet
使用ng-cloakディレクティブ。
誰かがこの情報を有用と判断した場合には、私は次のワークラウドを使用しています。
<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>
と
.hide{display: none;}
私はthis.pageLoaded = trueを設定する場合、コントローラまでのような角度表現は、ロードされたすべてのコンテンツを非表示にするためにこれを使用します。
<div id='message'><span ng-bind="$root.initializing.status"></span></div>
どちらが優れていますか？ – pkk
@pkk：必要性を見せたり隠したりするために、ngCloak。プレースホルダとして要素を使用している場合は、ng-bind –