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

文档