I'm currently working on a module where users can enter text into a text-area, along with some image-tags which have the following format:
ii[5ae71206|100|100]ii
.
This is how I 'm showing the text entered:
<span ng-bind-html="localeCache[item.sysName][editLocale]['text1'] | imageFilter"></span>
The "imageFilter"-filter is supposed to replace my custom tag from the text with an <img>
, so ii[5ae71206|100|100]ii
becomes:
<img src="path-to-file-with-image-id-5ae71206"
style="max-width:100px;max-height:100px;">
The source code for my filter is as follows:
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;
}
};
});
}
);
The filter DOES return the correct string, but the view isn't rendering the image. When I'm just entering some text without my custom image-tag, everything is working as intended. Any ideas?
Just use plain src
attribute since ng-src will need to $compile the HTML again. Here is a similar working example.
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>
I wrote simple demo with filter that works for me:
<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';
});
So problem inside filter logic
Alright, I think I located the problem: I do have a REST-service call inside my filter, which I removed for my initial post, since I thought it wasn't important and would only confuse people:
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;
}
};
});
}
);
I solved this by adding another array to my controller, which maps the image tag to the image-id, which I need to get the proper image from the REST-service. This array will be passed to the filter:
<span ng-bind-html="localeCache[item.sysName][locale]['text1'] | imageFilter:imageMap"></span>
The filter then looks like this:
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;
}
};
});
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.