angular.js - JSONP请求后更新范围和模板 [英] angular.js - update scope and template after jsonp request

问题描述

我创建的加载一些HTML code标签内的指令：

I created a directive that loads some html code inside a tag:

指令：

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

服务结果
此外，我使用一个服务来获取一些JSON数据

service
Besides, I'm using a service to fetch some json data

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

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

controller
The controller adds the received data to the scope

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

现在我面临以下问题。由模板被加载时，JSON请求还没有完成。这将导致显示为空字符串模板{{offer.price}}

Now I'm facing the following problem. By the time the template is being loaded, the json request is not finished yet. This results in showing the template with an empty string for {{offer.price}}.

我需要的方式与相应的值来更新模板，一旦offerServices已经接收到响应（即，offerService响应是可用的）

I would need a way to update the template with the corresponding values, once the offerServices has received a response (i.e. the offerService response is available)

任何想法？

推荐答案

如何使用 ngCloak

说明

该ngCloak指令用于prevent的角度HTML模板
  被简单地通过浏览器在其原始（未编译）显示
  而您的应用程序加载形成。使用这个指令以避免
  不良闪烁效应造成的HTML模板显示。

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

该指令可被施加到元件，但通常是
  细粒度的应用是为了从中受益pfered $ P $
  浏览器视图中逐步呈现。

The directive can be applied to the element, but typically a fine-grained application is prefered in order to benefit from progressive rendering of the browser view.

这篇关于angular.js - JSONP请求后更新范围和模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！