AngularJS 过滤 returns HTML 不正确
AngularJS filter returns HTML incorrectly
我有一个 returns 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
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>"));
}
}
});
你试过这个组合吗?它对我有用。
<div ng-bind-html="htmlText | trustAsHTML"></div>
您不需要为 ng-bind-html
的值添加双花括号。
很难从您发布的内容中判断出您的问题出在哪里,但也许一个有效的演示可以让您比较您的实施并确定问题所在。
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>");
}
};
});
<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>
此演示与您发布的示例代码中的第一个实现之间的一个区别是,我在 space 而不是 "
上拆分,但在我的演示中更改了它并且相应的数据,好像没有什么影响。
请注意,在您的脚本标签中,angular.js 必须在 angular-sanitize.js 之前加载。虽然,如果您如所示在模块中正确注入 ngSanitize,则会出现注入错误。
我有一个 returns 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);
};
}]);
-- 最初尝试这个是为了在
中获得 $scemyApp.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>"));
}
}
});
你试过这个组合吗?它对我有用。
<div ng-bind-html="htmlText | trustAsHTML"></div>
您不需要为 ng-bind-html
的值添加双花括号。
很难从您发布的内容中判断出您的问题出在哪里,但也许一个有效的演示可以让您比较您的实施并确定问题所在。
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>");
}
};
});
<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>
此演示与您发布的示例代码中的第一个实现之间的一个区别是,我在 space 而不是 "
上拆分,但在我的演示中更改了它并且相应的数据,好像没有什么影响。
请注意,在您的脚本标签中,angular.js 必须在 angular-sanitize.js 之前加载。虽然,如果您如所示在模块中正确注入 ngSanitize,则会出现注入错误。