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文档
  • 相关阅读:
    numpy 广播
    jupyter notebook
    OpenCV ——双线性插值(Bilinear interpolation)
    历届试题 大臣的旅费
    历届试题 幸运数
    数字图像处理_读写和显示图像
    历届试题 买不到的数目
    历届试题 连号区间数
    历届试题 翻硬币
    历届试题 剪格子
  • 原文地址:https://www.cnblogs.com/fsong/p/5995100.html
Copyright © 2011-2022 走看看