2

タグ内にいくつかの html コードをロードするディレクティブを作成しました。

指令：

var appDirectives = angular.module("skdApp", ["offerServices"]);
appDirectives.directive("widget", function() {
  return {
    restrict: 'A',
    template: '<div ng-controller="OfferCtrl"><p>{{offer.price}}</p></div>';
  }

さらに、サービス
を使用してjsonデータを取得しています

angular.module('offerServices', ['ngResource']).
  factory('Offer', function ($resource) {
    return $resource('url/offer.json', {},
      {
        get: {method: 'JSONP', params: {callback: 'JSON_CALLBACK'}}
      }
    );
});

controller
コントローラーは、受信したデータをスコープに追加します

function OfferCtrl($scope, Offer) {
  $scope.offer = Offer.get();
}

今、私は次の問題に直面しています。テンプレートが読み込まれるまでに、json リクエストはまだ完了していません。これにより、{{offer.price}} の空の文字列を含むテンプレートが表示されます。

offerServices が応答を受信したら (つまり、offerService 応答が利用可能になった場合)、対応する値でテンプレートを更新する方法が必要です。

何か案は？

4

1 に答える 1

2

ngCloakを使ってみてはどうですか

説明

ngCloak ディレクティブは、アプリケーションのロード中に Angular html テンプレートが生の (コンパイルされていない) 形式でブラウザーによって短時間表示されるのを防ぐために使用されます。このディレクティブを使用して、html テンプレートの表示によって引き起こされる望ましくないちらつき効果を回避します。

ディレクティブは要素に適用できますが、通常は、ブラウザー ビューのプログレッシブ レンダリングを利用するために、きめの細かいアプリケーションが優先されます。

于 2012-10-30T15:49:28.680 に答える