Angularjs 1 使用filter格式化输出href
Angularjs版本: 1.3.5
工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | filter }}
.我想要的效果是,如果href为空的话,就输出javascript:;
.
自定义的Filter是:
var app = angular.module("app", []);
app.controller('HomeCtrl', function($scope) {
$scope.menus = [
{
href:"",
title:"test1"
},
{
href:"http://www.domain.com",
title:"goto"
}
];
});
app.filter("menuhref", function() {
return function(href){
if(href == "" || href == undefined){
return "javascript:;";
}else{
return href;
}
};
});
使用示例:
<ion-list>
<ion-item ng-repeat="menu in menus">
<a href="{{ menu.href | menuhref}}">{{menu.title}}</a>
</ion-item>
</ion-list>
显示的效果是:
链接中出现了unsafe:javascript:;
的字样,意思是不安全的链接,原来可以添加链接白名单,如我的code中,链接是http:
和javascript:
的开头的,就可以在app.config
进行定义链接白名单,如:
.config(function($stateProvider, $urlRouterProvider,$compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(javascript|http):/);
});
语法是:aHrefSanitizationWhitelist([regexp]);
最终的显示效果是:
总结:
学习到了Angularjs中可以使用Filter
来格式化输出的信息,链接出现unsafe
字样时,可以通过$compileProvider.aHrefSanitizationWhitelist()
方法设置链接白名单。
参考文献:
- Building Custom AngularJS Filters 学习到如何定义自定义Filter
- Angular changes urls to “unsafe:” in extension page 解决Angularjs的链接显示unsafe
- $compileProvider
$compileProvider
文档