AngularJS导航激活状态逻辑改写：转$filter形式或简化判断

我来给你梳理两种可行的优化方向，刚好对应你提到的「改用$filter形式」和「统一使用links属性」的需求：

方案一：统一用links数组（彻底移除link属性） #

如果可以调整你的fullNav数据源，把所有导航项的链接都统一成links数组（哪怕是单个链接也写成[链接地址]的形式），这会是最干净的解决方案，彻底消除if-else逻辑：

首先先做个简单的数据预处理（如果你的数据源是静态的，也可以直接在配置里修改，不用写代码处理）：

// 把所有带link属性的项转成links数组，同时移除旧的link属性
this.fullNav = this.fullNav.map(item => {
  if (item.link && !item.links) {
    return { ...item, links: [item.link], link: undefined };
  }
  return item;
});

之后就可以用简洁的$filter写法实现匹配：

const currentPath = this.$location.$$path;
angular.forEach(
  this.$filter('filter')(this.fullNav, item => item.links.includes(currentPath)),
  matchedItem => { matchedItem.active = true; }
);

这样逻辑非常清晰，所有导航项都用同一个字段处理，后续维护也更省心。

方案二：用$filter兼容link和links（保留原有字段） #

如果暂时没法修改数据源，需要同时兼容两种字段，也可以把原来的if-else逻辑塞进$filter的自定义匹配函数里，替代外层的条件判断：

const currentPath = this.$location.$$path;
angular.forEach(
  this.$filter('filter')(this.fullNav, item => {
    // 三元表达式替代if-else，兼容两种字段逻辑
    return item.links ? item.links.includes(currentPath) : item.link === currentPath;
  }),
  matchedItem => { matchedItem.active = true; }
);

这里把原来的分支逻辑转换成了更紧凑的三元表达式，既保留了兼容性，又让代码看起来更简洁。

小提示 #

• 优先推荐方案一，统一的数据结构能避免后续出现更多分支逻辑，减少维护成本。
• 如果你的项目需要兼容ES6之前的旧浏览器，把includes换成item.links.indexOf(currentPath) !== -1就可以了。

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