angular.js - 在jsonp请求之后更新范围和模板

时间:2012-10-30 15:02:31

标签: javascript angularjs

我创建了一个在标记中加载一些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'}}
      }
    );
});

控制器
控制器将接收的数据添加到范围

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

现在我面临以下问题。加载模板时,json请求尚未完成。这会导致模板显示{{offer.price}}的空字符串。

一旦offerServices收到响应(即offerService响应可用),我需要一种方法来使用相应的值更新模板

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

如何使用ngCloak

  

描述

     

ngCloak指令用于阻止Angular html模板   来自浏览器的原始(未编译)短暂显示   在您的应用程序加载时表单。使用此指令可以避免   由html模板显示引起的不良闪烁效应。

     

该指令可以应用于元素,但通常是   细粒度的应用程序是优先的,以便从中受益   渐进式渲染浏览器视图。