使用自定义指令在页面加载中加载图像

我想在使用自定义指令加载'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你能完成这个吗？ –

使用自定义指令在页面加载中加载图像

回答

相关问题