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

小提琴