使用自定義指令在頁面加載中加載圖像

我想在使用自定義指令加載'add_more_services_new.html'頁面時加載圖像。如果條件爲真，則加載圖像，如果條件爲假，則加載另一圖像。以下是我的自定義指令。使用自定義指令在頁面加載中加載圖像

function addMoreServicesFn(){ 
return { 
     restrict: 'E', 
        templateUrl: 'templates/add_more_services_new.html', 

     controller:function($scope, $rootScope){ 
      $scope.hide = function(){ 
       $rootScope.modalShown = !$rootScope.modalShown; 
      } 
     }

我該如何做到這一點？

來源

2015-07-19 Supun Wimukthi

您可以使用此ng-src指令，

創建函數基於類似的條件來獲得圖像src，

controller:function($scope, $rootScope){ 
     $scope.hide = function(){ 
      $rootScope.modalShown = !$rootScope.modalShown; 
     }; 

     $scope.getSrc = function() { 
      if(condition_statement) { 
       return "images/a.jpg"; 
      } else { 
       return "images/b.jpg"; 
      } 
     } 
    }

在add_more_services_new.html

<img ng-src="{{ getSrc() }}" />

來源

2015-07-19 15:35:51

謝謝@KalhanToress：D 但是當我的模板加載時如何調用這個函數？ –

umm把''放在'add_more_services_new.html'中，之後'ng-src'將調用控制器中的getSrc（）函數並根據條件獲取'src'。 :) –

它運作良好，非常感謝:) –

爲了實現你同樣的事情可以使用{{}}插值指令在ng-src本身處理此邏輯。

<img ng-src="{{modalShown?'/img/someImg.jpg':'/img/someOtherImg.jpg'}}" alt="Some Title"/>

來源

2015-07-19 15:36:46

謝謝。我想打電話給這個模板時，我在自定義指令中定義的加載.. –

@SupunWimukthi是的，你可以把它放在你的模板本身.. –

@SupunWimukthi你能完成這個嗎？ –

使用自定義指令在頁面加載中加載圖像

回答

相關問題