角度的全局变量

时间:2017-04-13 11:51:10

标签: javascript angularjs momentjs angular-moment

我有一些日期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是否符合正确的用例,或者有更好的方法来解决此问题吗?

感谢任何帮助。提前谢谢!

3 个答案:

答案 0 :(得分:2)

我为日期做的是创建自定义过滤器
例如:

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

您可以执行以下操作,并在自定义过滤器中使用amCalendar过滤器。有了这个,您可以在同一个过滤器中模拟日期的所有代码。

答案 1 :(得分: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>

答案 2 :(得分:0)

无需创建自定义过滤器,您可以按照amCalendar中的说明自定义运行功能中的docs

这是一份工作样本:

&#13;
&#13;
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();
});
&#13;
<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>
&#13;
&#13;
&#13;