理解 AngularJS ng-src

Question

正如這里所解釋的，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);
};

正在從網絡服務中檢索路徑。 由於這種延遲，瀏覽器會嘗試加載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);
};

小提琴

Answer 2

示例信息

---

讓我們以這個blogitem directive 。 上面的示例已經向您展示了如何設置默認值。

---

HTML :

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS：

.directive( 'blogitem', function()
{
    return {
        restrict    : 'E',
        templateUrl : 'js/app/directives/blogitem.html',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : '@',
            bgSrc : '@'
        }
    }
} )

HTML模板：

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

---

希望它有助於您理解ng-src 。

Answer 3

我也遇到了同樣的問題。 我注意到的一件事是，如果 ng-src 的值未定義，則不會獲取 img。 因此，我創建了一個實用方法來連接兩個參數並當且僅當兩個參數都被定義時返回一個值。 見下文。

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>

myApp.factory('MyUtil', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

小提琴

Answer 4

如果數據尚未填充，您可以將ng-src設置為空字符串：

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

當path未初始化時，條件將短路並轉到or部分並將data-ng-src為'' （空字符串），從而不會命中服務器。

Answer 5

在最新的情況下，您可以這樣評估它：

ng-src="{{ methodThatReturnsString() }}"

Answer 6

我確定 100% 工作

首先，您必須像這樣進行查詢

select (select '../Images/'|| T_LANG2_NAME ||'.png' T_LANG2_NAME from T04222_T where T_LOG_ID = T04220.T_C_STATUS) TIMER from T04220 
where T_PAT_NO = '89004331' group by T_C_STATUS 
having max(T_ARRIVAL_DATE) = (select max(T_ARRIVAL_DATE) from T04220 where T_PAT_NO = '89004331');) then you write Code for Controller like this ( if (scope.T_PAT_NO) {
                debugger;
                $http({
                        method: 'POST',
                        url: '/T04205/GetTimerImage',
                        data: JSON.stringify({ PatientCode: scope.T_PAT_NO })
                    }).
                    success(function (data) {
                        debugger;
                        var newDataJSON = JSON.parse(data);

                        scope.TIMER = newDataJSON[0].TIMER;

                    });

然后像這樣的html代碼

<input id="imTimer" type="image" src="{{TIMER}}" style="width: 80px;height: 80px" />