NG綁定 - 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; 
       } 
      }; 
     }); 
    } 
); 

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

Answer 1

好吧，我想我找到問題：我有我的過濾器，我爲我的初始後取出裏面一個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; 
       } 
      }; 
     }); 
    } 
); 

我加入另一個陣列我的控制器，其圖像標籤的圖像的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; 
       } 
      }; 
     }); 
    } 
); 

Answer 2

只需使用普通的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 3

我寫了過濾器簡單的演示，對我的作品：

<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'; 
}); 

Demo Plunker

所以過濾器內部的邏輯問題