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

标签 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'}}
      }
    );
});

Controller
Controller 将接收到的数据添加到范围

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

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

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

有什么想法吗?

最佳答案

使用 ngCloak 怎么样?

Description

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.

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.

关于javascript - angular.js - 在 jsonp 请求后更新范围和模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13141816/

相关文章:

javascript - 我将如何从外部 url 解析 json?

javascript - 正则表达式\n 不起作用

javascript - 解析云代码中从ACL获取用户信息

javascript - Ionic 如何制作链接到其他州的列表

jquery - 由于 jquery 高度,Packery 计算错误的位置

angularjs - 在 AngularJS 中设置 window.location 或 window.open 在 IE 11 中给出 "access is denied"

javascript - 从 js 文件中获取对象作为字符串读取并使用 gulp 处理成单个文件

javascript - 将 Ajax 数据获取到 Angular 网格中

javascript - 一个 Controller 的值应该可供其他 Controller 使用

javascript - Angular-gettext 翻译服务似乎不起作用。