从编译延迟 angular 指令模板直到函数完成

Question

我有一个 angular 指令，它在我的页面上显示图像。但是，此图像由 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 应该可以解决问题 ~~

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

Answer 3

使用 ng-src 代替 src

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

从编译延迟 angular 指令模板直到函数完成

Delay angular directive template from compiling until function is complete

javascript

angularjs

angularjs-scope

angular-directive