了解AngularJS NG-SRC [英] Understanding AngularJS ng-src

问题描述

作为解释这里 的angularjs指令NG-SRC是用来prevent浏览器从加载资源（如图片）车把得到解析之前。我目前使用以下code：

As explained here, the angularjs directive ng-src is used to prevent the browser from loading the resource (e.g. image) before the handlebars get parsed. I'm currently using the following code:

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

通过以​​下JS：

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

的路径是从一个web服务检索。因为这种延迟，浏览器尝试加载的http：//本地主机：8081 /媒体/ ，这将导致404一旦路径检索，浏览器发出正确的请求和负荷的图像

The path is being retrieved from a webservice. Because of this delay, the browser tries to load http://localhost:8081/media/, which causes a 404. Once the path is retrieved, the browser issues the correct request and loads the image.

什么是preferred方法prevent加载任何资源，直到所有的数据都准备好了？

What is the preferred method to prevent loading any resources until all data is ready?

请参见的jsfiddle 为了说明我的情况的一个实例。

Please see jsfiddle for an example illustrating my situation.

谢谢，

的Martijn

推荐答案

把整个路径$范围变量中。这样 NG-SRC 会等到你为它提供了全面解决路径图：

Put the whole path inside the $scope variable. That way ng-src will wait until you provide it with the fully resolved path to the image:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = 'https://si0.twimg.com/profile_images/';
    $timeout(function () {
        $scope.path = path + '2149314222/square.png';
    }, 1000);
};

FIDDLE

这篇关于了解AngularJS NG-SRC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！