angularjs - 了解 AngularJS ng-src

Question

如解释 here ，AngularJS 指令 ng-src 用于防止浏览器在句柄被解析之前加载资源(例如图像)。我目前正在使用以下代码:

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

使用以下 JavaScript:

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

FIDDLE