Angular ng-href链接协议补全问题：能否仅通过HTML解决？

嘿，完全不用非得单独写额外JS处理！你用的是AngularJS 1.x对吧？它本身就支持在HTML层面直接搞定这个协议头重复的问题，给你两种实用方案：

方案1：直接用表达式三元判断 #

最简单的方式就是在ng-href里用字符串方法做条件判断，检查链接是否已经包含了http/https协议头：

<a class="Test" ng-href="{{d.link.startsWith('http') ? d.link : 'https://' + d.link}}">link</a>

逻辑很直白：如果d.link已经以http开头（不管是http还是https都能匹配到），就直接用原链接；否则自动补上https://前缀，完美避免重复的问题。

方案2：封装成自定义过滤器（适合多处复用） #

如果项目里很多地方都需要处理这种链接，把逻辑封装成Angular过滤器会更优雅，维护起来也方便：
首先在JS里定义过滤器：

// 假设你的Angular模块是app
angular.module('app', []).filter('ensureHttpProtocol', function() {
  return function(url) {
    if (!url) return '';
    // 用正则忽略大小写检查是否已有协议头
    if (/^https?:\/\//i.test(url)) {
      return url;
    }
    return 'https://' + url;
  };
});

然后在HTML里直接调用过滤器：

<a class="Test" ng-href="{{d.link | ensureHttpProtocol}}">link</a>

这种方式把处理逻辑集中起来，后续要调整规则（比如改成支持http或其他协议），只需要修改过滤器就行，不用挨个改HTML里的表达式。

总结一下：两种方案都不需要额外的独立JS处理逻辑，完全可以在HTML层面（配合Angular的表达式或过滤器）解决你的问题，根据自己的使用场景选就行～

内容的提问来源于stack exchange，提问作者joe123