Question

我有一个角度指令，可以在我的页面上显示图像。但是，此图像由URL中的查询字符串中的值确定：

app.directive('myDirective', function(myService) {
    return {
        restrict: 'A',
        replace: true,
        scope: true,
        link: function($scope, element, attrs) {

            var myImage = myService.getParam();

            if (myImage == AA3) {
                $scope.myImage = 'YAHOO';
            }
            else {
                $scope.myImage = 'capitalone';
            }

        },
        template : '<img src="/resources/{{myImage}}.png" />'
    };
});

以上问题是我可以看到2个http请求：

1. http://www.mydom.net/resources/{{myImage}}.png
2. http://www.mydom.net/resources/YAHOO.png

如何在myImage包含值之前延迟模板的编译？

Answer 1

使用ng-src而不是src。

<img ng-src="/resources/{{myImage}}.png" />

Answer 2

使用ng-src而不是src

template : '<img ng-src="/resources/{{myImage}}.png" />'

Answer 3

ng-src应该做到这一点~~

template : '<img ng-src="/resources/{{myImage}}.png" />'

延迟角度指令模板从编译到功能完成

3 个答案: