ng-bind-html - 通過過濾器獲取圖像

Question

我目前正在開發一個模塊，用戶可以在文本區域中輸入文本，以及一些具有以下格式的圖像標簽：

ii[5ae71206|100|100]ii 。

這是我顯示輸入文本的方式：

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

“imageFilter”-filter應該用<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;
                }
            };
        });
    }
);

過濾器DOES返回正確的字符串，但視圖不呈現圖像。 當我剛剛輸入一些沒有自定義圖像標簽的文本時，一切都按預期工作。 有任何想法嗎？

Answer 1

只需使用普通的src屬性，因為ng-src需要再次$編譯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> 

Answer 2

我用過濾器編寫了簡單的演示版，對我有用：

<div ng-bind-html="path | imageFilter" ></div>

JS

app.filter('imageFilter', function($sce){
            return function(text) {
              var html = $sce.trustAsHtml('<img src="' + text  +'" style="max-width:100px;max-height:100px;"/>'); 
               return html;
            };
        });

app.controller('FirstCtrl', function($scope, $sce) {
  $scope.path = 'https://media.mnn.com/assets/images/2014/09/running-with-dog.jpg.653x0_q80_crop-smart.jpg';
});

演示Plunker

過濾邏輯里面的問題

Answer 3

好吧，我想我找到了問題：我在我的過濾器中有一個REST服務調用，我刪除了我的初始帖子，因為我認為它不重要，只會讓人混淆：

define(
    ['angularAMD', 'docService']
    , function(angularAMD){

        angularAMD.filter('imageFilter', function($rootScope, $sce, DocService){
            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];

                    DocService.listDocsByParameters({ firstParam: 'textPropertyC/s/eq/' + btoa(imgTag) }, function(response){
                        var imgId = response[0].id;

                        var imgString = '<img src="' + $rootScope.restUrl + 'doc-rest/documentById/' + imgId + '" style="max-width:' + width + 'px; max-height:' + height + 'px;">';
                        var textNew = text.replace(regExImg, imgString);
                        console.log(textNew);
                        return textNew; //This is probably the problem.
                    });
                }
                else{
                    return text;
                }
            };
        });
    }
);

我通過向控制器添加另一個數組來解決這個問題，該控制器將圖像標記映射到image-id，我需要從REST服務中獲取正確的圖像。 此數組將傳遞給過濾器：

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

然后過濾器看起來像這樣：

define(
    ['angularAMD']
    , function(angularAMD){

        angularAMD.filter('imageFilter', function($rootScope){
            return function(text, map) {

                if(typeof map === 'undefined' || typeof text === 'undefined' || text === '' || text === null){
                    return 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 imgId = map[imgTag];

                    var imgString = '<img src="' + $rootScope.restUrl + 'doc-rest/documentById/' + imgId + '" style="max-width:' + width + 'px; max-height:' + height + 'px;">';
                    var textNew = text.replace(regExImg, imgString);
                    console.log(textNew);
                    return textNew;
                }
                else{
                    return text;
                }
            };
        });
    }
);