Angular 中的全局变量答案

【问题标题】：Global Variables in AngularAngular 中的全局变量
【发布时间】：2017-04-13 11:51:10
【问题描述】：

我有一些日期 ISO 字符串，我想将其格式化为人类可读的日期。我正在使用angular-moment 库在我的模板中使用过滤器来格式化这些日期。

<span>{{ $ctrl.date | amCalendar:referenceTime:formats }}</span>

我想自定义显示日期的格式如下：

const dateFormats = {
  relative: {
    sameDay: '[Today at] LT',
    lastWeek: 'DD MMM, YYYY [at] LT',
    sameElse: 'DD MMM, YYYY [at] LT'
  }
}

所以我可以在我的模板中这样做：

<span>{{ $ctrl.date | amCalendar:null:dateFormats }}</span>

但是，我希望这些dateFormats 存在于全局的某个地方，而不是只存在于该组件的控制器中，因为我希望能够在其他模板中引用这些dateFormats。

这是否符合将dateFormats 附加到$scope 的适当用例，还是有更好的方法来处理这个问题？

感谢任何帮助。提前致谢！

【问题讨论】：

您可以使用常量（这是一个单例）来执行此操作。参考此链接 [link](ilikekillnerds.com/2014/11/…)]
看看this answer，不需要创建自定义过滤器，您可以在run函数中自定义amCalendar，如docs中所述
应该查看过文档。这甚至更好。如果您将此添加为答案，我会接受。

标签： javascript angularjs momentjs angular-moment

【解决方案1】：

您应该创建自己的自定义过滤器。像这样的：

angular
  .module('myApp')
  .filter('myDateFormat', ['$filter',function ($filter) {
      const dateFormats = {
        relative: {
          sameDay: '[Today at] LT',
          lastWeek: 'DD MMM, YYYY [at] LT',
          sameElse: 'DD MMM, YYYY [at] LT'
        } 
      }
      return function() {
        return $filter('amCalendar')(null, dateFormats)
      }
  }]);

现在，您可以轻松地从模块中的任何模板中使用此过滤器：

<span>{{ $ctrl.date | myDateFormat }}</span>

【讨论】：

是的，我认为这种方法是最好的方法，它让我远离全局变量——现在，哈哈。谢谢！
@realph 当然，很高兴我能帮上忙 :)

【解决方案2】：

我为日期所做的是创建一个自定义过滤器
例如：

function ascDateFilter($filter) {
    return function (input) {
        return $filter('date')(input, "dd/MM HH:mm:ss");
    };
}

您可以这样做并在您的自定义过滤器中使用 amCalendar 过滤器。有了这个，你就可以在同一个过滤器中获得所有模板日期的代码。

【讨论】：

【解决方案3】：

无需创建自定义过滤器，您可以在运行函数中自定义amCalendar，如docs中所述。

这是一个工作示例：

angular.module('MyApp',['angularMoment'])
.run(function(){
  const dateFormats = {
    calendar: {
      sameDay: '[Today at] LT',
      lastWeek: 'DD MMM, YYYY [at] LT',
      sameElse: 'DD MMM, YYYY [at] LT'
    }
  }
  moment.updateLocale('en', dateFormats);
})
.controller('AppCtrl', function($scope) {
  $scope.date = new Date();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  <span>{{ date | amCalendar }}</span>
</div>

【讨论】：