Angular 中的全局变量
Global Variables in Angular
我有一些日期 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
的正确用例,或者是否有更好的方法来处理此问题?
感谢任何帮助。提前致谢!
我为日期做的是创建自定义过滤器
例如:
function ascDateFilter($filter) {
return function (input) {
return $filter('date')(input, "dd/MM HH:mm:ss");
};
}
您可以这样做并在您的自定义过滤器中使用 amCalendar 过滤器。有了这个,您就可以在同一个过滤器中使用所有模板化日期的代码。
您应该创建自己的自定义过滤器。像这样:
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>
不需要创建自定义过滤器,可以自定义amCalendar
in your run function as described in the 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>
我有一些日期 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
的正确用例,或者是否有更好的方法来处理此问题?
感谢任何帮助。提前致谢!
我为日期做的是创建自定义过滤器
例如:
function ascDateFilter($filter) {
return function (input) {
return $filter('date')(input, "dd/MM HH:mm:ss");
};
}
您可以这样做并在您的自定义过滤器中使用 amCalendar 过滤器。有了这个,您就可以在同一个过滤器中使用所有模板化日期的代码。
您应该创建自己的自定义过滤器。像这样:
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>
不需要创建自定义过滤器,可以自定义amCalendar
in your run function as described in the 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>