javascript - ng-bind-html - 通过过滤器获取图像

Question

我目前正在开发一个模块，用户可以在其中将文本输入文本区域，以及一些具有以下格式的图像标签:

ii[5ae71206|100|100]ii .

这就是我显示输入文本的方式:

<span ng-bind-html="localeCache[item.sysName][editLocale]['text1'] | imageFilter"></span>

“imageFilter”过滤器应该用 <img> 替换文本中的自定义标签, 所以 ii[5ae71206|100|100]ii变成:

<img src="path-to-file-with-image-id-5ae71206" 
     style="max-width:100px;max-height:100px;">

我的过滤器的源代码如下:

define(
    ['angularAMD', 'docService']
    , function(angularAMD){
        angularAMD.filter('imageFilter', function($rootScope, DocAdminService){
            return function(text) {

                var regExImgTag = /ii\[(.*?)]ii/g;
                var regExImg = /ii\[.*?\]ii/;
                var imageTags = regExImgTag.exec(text);

                if(imageTags !== null){
                    var tag = imageTags[1];
                    var parts = tag.split('|');
                    var imgTag = parts[0];
                    var width = parts[1];
                    var height = parts[2];

                   var imgString = '<img ng-src="' + $rootScope.path_to_REST_Service + imgTag + '" style="max-width:' + width + 'px; max-height:' + height + 'px;">';
                   var textNew = text.replace(regExImg, imgString);
                   console.log(textNew);
                    return (textNew);
                    });
                }
                else{
                    return text;
                }
            };
        });
    }
);

过滤器确实返回了正确的字符串，但是 View 没有渲染图像。当我只是输入一些没有我的自定义图像标签的文本时，一切都按预期工作。有什么想法吗？

Answer 1

只需使用普通的 src 属性，因为 ng-src 将需要再次 $compile HTML。这是一个类似的工作示例。

var app = angular.module("app", ["ngSanitize"]);
app.controller("MainController", function($scope){

  $scope.localeCache = "Some text";

});

app.filter("imageFilter", function(){
    return function (input) {
    
        //Here you add modifications to the input.
        //This is just an example
        
        var width = "100px",
            imgPath = 'http://via.placeholder.com/350x150',
            height = "100px";
        
        return '<img src="' 
        + imgPath
        + '" style="max-width:'
        + width 
        + 'px; max-height:'
        + height 
        + 'px;">';
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.1/angular-sanitize.min.js"></script>

<div ng-app="app" ng-controller="MainController">
  <span ng-bind-html="localeCache | imageFilter"> </span
</div>