AngularJS中将常量用作过滤器参数的实现方案

现存问题 #

原项目中日期过滤器的参数是硬编码字符串，直接写在所有HTML模板里：

{{ aDate | bxDate : 'WhitoutTimePart' }}

一旦这个参数的取值需要调整，必须逐页搜索修改所有模板里的硬编码值，维护成本极高。本次改造要达成的目标是，把硬编码值替换为可全局访问的常量绑定，实现如下无硬编码的模板写法：

{{ aDate | bxDate : bxdate.whitoutTimePart }}

前置基础工作 #

无论选择哪种实现路径，首先需要在项目的公共工具模块中统一定义日期相关常量，避免分散定义带来的不一致问题：

// 公共模块（如common/utils）中定义常量
angular.module('common')
  .constant('BX_DATE_FORMAT', {
    whitoutTimePart: 'WhitoutTimePart',
    // 其他日期格式参数可后续追加到该对象
    withTimePart: 'WithTimePart',
    isoFormat: 'ISO'
  })

两种可落地的实现路径 #

方案1：根作用域全局暴露常量（最适合当前存量改造场景） #

这个方案对现有代码的侵入性最低，不需要逐个修改业务控制器的逻辑。只需要在应用启动的运行块中，把常量对象统一挂载到根作用域下，所有页面模板就可以直接访问该常量：

// 应用主模块的启动逻辑
angular.module('app')
  .run(['$rootScope', 'BX_DATE_FORMAT', function($rootScope, BX_DATE_FORMAT) {
    // 命名空间直接对齐模板预期的bxdate结构，减少后续模板改动
    $rootScope.bxdate = BX_DATE_FORMAT;
  }])

完成配置后，所有页面的原硬编码写法可以直接替换为目标写法，不需要额外在单个控制器中注入常量、手动绑定到$scope。

• 核心优势：所有模板全局可访问，后续调整参数值仅需修改constant中的定义，所有页面自动同步生效，完全满足“改一处生效全局”的改造要求
• 注意点：需要保证该run块的加载顺序早于所有业务页面的渲染逻辑，避免出现bxdate未定义的报错

方案2：常量查询过滤器（对全局作用域整洁度要求高的场景可选） #

如果团队规范不允许随意往$rootScope上挂业务属性，可以封装专门的常量查询过滤器，在模板表达式内部完成常量值的读取，完全避免全局作用域污染：

// 公共模块中注册常量查询过滤器
angular.module('common')
  .filter('bxConst', ['BX_DATE_FORMAT', function(BX_DATE_FORMAT) {
    return function(path) {
      // 支持按点分隔的路径读取嵌套的常量值
      return path.split('.').reduce((target, key) => target?.[key], BX_DATE_FORMAT);
    }
  }])

模板侧的写法调整为：

{{ aDate | bxDate : ('whitoutTimePart' | bxConst) }}

• 核心优势：无全局作用域残留，常量的读取逻辑完全收敛在过滤器内部，不会和其他业务属性冲突
• 劣势：现有模板的改动量比方案1稍大，写法的直观度弱于直接绑定作用域属性

改造避坑提示

• 不要在模板中直接写JS字面对象当参数，本质和硬编码字符串没有区别，后续维护成本不会降低
• 常量定义必须放在无业务依赖的公共模块中，避免引入模块循环依赖问题
• 挂载的作用域属性命名要和预期的模板写法完全对齐，减少后续模板的适配工作量

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