zoukankan      html  css  js  c++  java
  • 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文档
  • 相关阅读:
    第六次上机作业
    NOIP2016 DAY1 T2天天爱跑步
    NOIP2009 T2 Hankson的趣味题
    NOIP2013 DAY2 T3火车运输
    线段树
    NOIP2012 DAY2 T2借教室
    NOIP2015 DAY2 T1跳石头
    NOIP2016 DAY2 T3 愤怒的小鸟
    文本编辑常用快捷键
    洛谷P1516 青蛙的约会
  • 原文地址:https://www.cnblogs.com/fsong/p/5995100.html
Copyright © 2011-2022 走看看