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()方法设置链接白名单。

参考文献:

1. Building Custom AngularJS Filters 学习到如何定义自定义Filter
2. Angular changes urls to “unsafe:” in extension page 解决Angularjs的链接显示unsafe
3. $compileProvider $compileProvider文档