了解AngularJS ng-src

Question

正如解释这里的angularjs指令NG-SRC是用来防止浏览器加载资源(如图像)车把得到解析之前.我目前正在使用以下代码:

<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://localhost:8081/media/,从而导致404.一旦检索到路径,浏览器就会发出正确的请求并加载图像.

在所有数据准备好之前,防止加载任何资源的首选方法是什么？

请参阅jsfiddle以获取说明我的情况的示例.

谢谢,

马亭

Answer 1

将整个路径放在$ scope变量中.这种方式ng-src将等到你为它提供完全解析的图像路径:

<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);
};

小提琴