我有一个返回HTML的过滤器,但Angular没有正确显示它。我已经包含了angular-sanitize.min.js,并且已经在各个地方尝试了ng-bind-html和$ sce。我知道我很接近,但在摔跤了几天之后,我想我会要求一些专家见解。我对Angular和javascript很新。谢谢你的帮助。
证明我已经消毒了
<script src="lib/angular/angular-sanitize.min.js"></script>
app.js - 包含清理并过滤我正在使用
var myApp = angular.module('myApp', [
'ngRoute',
'clownfishControllers',
'ngSanitize'
]);
myApp.filter('fmtIt', function () {
return function (name) {
var parts = name.split(' "');
if (parts.length == 2) {
return "<i>".concat(parts[0], "</i>", ' "', parts[1]);
} else {
return "<i>".concat(parts[0], "</i>");
}
}
});
list.html - 我在html文件中的两个例子
<h2 ng-bind-html="item.name | fmtIt"></h2> --strips off html in output
<h2>{{item.name | fmtIt }}</h2> --shows html tags in output
controllers.js - 我尝试将$ sce注入的控制器之一。
clownfishControllers.controller('ListCtrl', ['$scope', '$http', 'Parents', '$sce', function($scope, $http, Parents, $sce) {
$http.get('js/data.json').success(function(data) {
$scope.clownfish = data;
$scope.clownfishOrder = 'name';
$scope.parents = Parents;
console.log($scope);
});
}]);
app.js - 两个最近的其他尝试,我尝试将此作为在fmtIt过滤器上堆叠的附加过滤器
myApp.filter('trustAsHTML', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
- 最初试用这个来获得$ sce in
myApp.filter('fmtIt', function ($sce) {
return function (name) {
var parts = name.split(' "');
if (parts.length == 2) {
return $sce.trustAsHtml("<i>".concat(parts[0], "</i>", ' "', parts[1]));
} else {
return $sce.trustAsHtml("<i>".concat(parts[0], "</i>"));
}
}
});
答案 0 :(得分:1)
你尝试过这种组合吗?它对我有用。
<div ng-bind-html="htmlText | trustAsHTML"></div>
您不需要在ng-bind-html
的值中添加双花括号。
答案 1 :(得分:1)
很难从您发布的内容中判断出您的问题所在,但也许正在运行的演示可让您比较实施情况并确定错误。
var app = angular.module('demo', ['ngSanitize']);
app.controller('NamesCtrl', function($scope){
$scope.names = [
{first: 'Jennifer Ann', last: 'Meade'},
{first: 'Colin', last: 'Davis'},
{first: 'Karen Walker', last: 'Johnson'}
];
});
app.filter('fmtIt', function () {
return function (name) {
var parts = name.split(' ');
if (parts.length == 2) {
return "<i>".concat(parts[0], "</i>", ' ', parts[1]);
} else {
return "<i>".concat(parts[0], "</i>");
}
};
});
&#13;
<script src="https://code.angularjs.org/1.3.17/angular.js"></script>
<script src="https://code.angularjs.org/1.3.17/angular-sanitize.js"></script>
<div ng-app="demo" ng-controller="NamesCtrl">
<h1 ng-repeat="name in names"><span ng-bind-html="name.first | fmtIt"></span> {{name.last}}</h1>
</div>
&#13;
此演示与您发布的示例代码中的第一个实现之间的一个区别是,我在一个空间而不是"
上进行拆分,但是在我的演示和相应数据中更改了这个,并没有似乎没有任何影响。
请注意,必须在脚本标记中的angular-sanitize.js之前加载angular.js。虽然,如果您正如您所示正确地在模块中注入ngSanitize,您将会收到注射错误。