Question

我想在使用自定义指令加载'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; 
            }
        }

我该如何实现？

Answer 1

您可以在此处使用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() }}" />

Answer 2

为了实现同样的目的，你可以使用ng-src插值指令在{{}}本身上处理这个逻辑。

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

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

2 个答案: