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文档

巴特西

Angularjs 1 使用filter格式化输出href

参考文献:

最新文章

热门文章