Question

我有这个指令：

.directive('img', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attr) {
            if (attr.src && attr.type === "extension"){

                var url = "chrome-extension://" + chrome.runtime.id + attr.src
                // console.log(url)

                elem[0].removeAttribute('src')
                // elem[0].setAttribute("src", url)
                // elem[0].dataset.ngSrc = url
                console.log(elem[0])
                console.log(elem[0].src)

            }

        }
    };
})

profile.html：

          <tr ng-repeat="integration in profile.integrations">
             <td>
                  <!-- <h3>{{integration.provider}}</h3> -->
                 <img type="extension" src="/images/icons/{{integration.provider}}.png" alt="" width="50px">
             </td>
         </tr>

我的控制台日志仍然显示src并且不会将其删除也不会替换它。这与ng-repeat有关，因为这完全适用于另一个图像。

Answer 1

您基本上正在重新创建一个angular的便捷指令，该指令是针对在src属性中使用表达式的情况而创建的。使用ng-src而不是src，你将不需要你的img指令

ng-src doc：https://docs.angularjs.org/api/ng/directive/ngSrc

在src属性中使用{{hash}}之类的Angular标记不起作用   右：浏览器将使用文字文本从URL中获取   {{hash}}直到Angular替换{{hash}}中的表达式。该   ngSrc指令解决了这个问题。

<img type="extension" 
     ng-src="/images/icons/{{integration.provider}}.png" alt="" width="50px">

正如评论中的runTarm所述，这并没有将chrome-extension协议添加到图片网址，为此你需要做两件事

将chrome-extension添加到AngularJS白名单，否则Angular会将 unsafe：添加到网址
将表达式添加到ng-src以添加协议

添加到白名单

//modified from http://stackoverflow.com/a/15769779/560593
var app = angular.module( 'myApp', [] );
app.config( ['$compileProvider', function( $compileProvider ) {   
    //adds chrome-extension to the whitelist
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
]);
app.run(function($rootScope){
    //put the id on the rootScope so we can use it in expression
    $rootScope.extensionUrl = "chrome-extension://"+chrome.runtime.id;        
});

HTML

<img ng-src="{{extensionUrl}}/images/icons/{{integration.provider}}.png" alt="" width="50px">

JSFiddle

关于ng-repeat的指令不起作用

1 个答案: