angular.js - ネットワーク速度が遅いために angularjs でプレースホルダーが表示される問題を解決するにはどうすればよいですか?

Question

angularjs を作成するときは誰もがこの問題に遭遇すると思いますが、一般的な Web では明らかではありませんが、WAP ページを作成する場合、インターフェイスを開いたばかりのときに停止するプレースホルダーがあることは明らかです。 js が非同期になるまで待ちます。更新後は値が再び変更され、エクスペリエンスはあまり良くありません。

これについては、もっと成熟した解決策があるべきだと思います。アドバイスをお願いします~!

Answer 1

@Broooooklyn このヒントに従って、非常に明確な説明が記載された非常に優れた投稿を stackoverflow で見つけました

Answer 2

ng-bind または ng-cloak、公式が何度も言ってますが、CSS を使用して解決するのが最高で完璧です

http://www.cnblogs.com/whitewolf/p/3495822.html

https://docs.angularjs.org/api/ng/directive/ngCloak

[ng:cloak]、[ng-cloak]、[data-ng-cloak]、[x-ng-cloak]、.ng-cloak、.x-ng-cloak {
表示: なし!重要;
}

Answer 3

ng-bindを使用してください

Answer 4

angularjs は、実際には基礎となる $digest ループである $qProvider と自動的に連携します。

オプション 1

$q の Promise の拒否または解決が実行されない場合、その試みはレンダリングされず、ましてやプライマリ プレースホルダーの問題も発生しません。 angularjsのrouterモジュールではresolveを定義することでこの機能が利用できます。 angular-ui-router も同様に使用されます。 angular-ui-router 使用同理。

方案二

不要使用 {{ }} 占位符，使用 ng-bind 指令。但是这种方案不灵活。
比如，使用 {{ }} 写法可以这样

html<p>{{ start_time }} ~ {{ end_time }}</p>

但是使用 ng-bind 指令后就只能这样了。

<p>
    <span ng-bind="start_time"></span>
    ~
    <span ng-bind="start_time"></span>
</p>

会出现一大堆没用的空标签。不利于维护。而且页面会出现空白。

推荐使用第一种方案。但是第一种也有一个缺点，就是当数据返回比较慢的时候，视图回白板，不过还是有发给发的。在页面切换的时候可以使用 ng-animate 加上 loading 动画就好了。

router.js angular-ui-router 模块示例代码如下

javascript.state('admin.event', {
    url: '/events',
    views: {
        'MainBody': {
            // 重点在这里
            templateUrl: '.....',
            controller: 'dzadmin.controller.events.query', //这里需要制定控制器名称，视图里不要在再制定了。因为是有 路由器 负责告诉控制器合适开始执行，而不是试图来驱动。
            resolve: {
                events: ['eventService', '$q', function(eventService, $q){
                    var deferred = $q.defer();
                    eventService.query(.....).then(deferred.resolve, deferred.reject);
                    return deferred.promise;
                }]
            }
        }
    }
})

// dzadmin.controller.events.query

.controller('dzadmin.controller.events.query', ['$scope', 'events', function($scope, events){
    $scope.events = events;
}])

// 试图代码
一定要注意，视图里面不能再重复指定控制器名称。否则会报错

オプション 2🎜 🎜 {{ }} プレースホルダーは使用せず、ng-bind ディレクティブを使用してください。しかし、この解決策は柔軟性がありません。
たとえば、{{ }}を使用すると、次のように書くことができます🎜 リーリー 🎜ただし、ng-bind ディレクティブを使用した後にできることはこれだけです。 🎜 リーリー 🎜無駄な空タグが大量に表示されます。メンテナンスに有利ではありません。そしてページは空白になります。 🎜 🎜最初のオプションを使用することをお勧めします。ただし、最初の方法には欠点もあります。つまり、データが返されるのが遅い場合、ビューはホワイトボードに戻りますが、データは送信されたままになります。 ng-animateを使用すると、ページ切り替え時の読み込みアニメーションを追加できます。 🎜 🎜router.js angular-ui-router モジュールのサンプルコードは以下の通りです🎜 リーリー 🎜// ビュー コード
ビュー内でコントローラー名を繰り返し指定することはできないことに注意してください。それ以外の場合は、エラーが報告されます。これは、コントローラ名がルートで指定されているためです。 🎜 リーリー