暴露moment.js到$ rootScope的良好做法?

时间:2017-08-17 18:02:16

标签: angularjs momentjs

我开始使用AngularJs应用程序。在index.js中,一系列moment.js函数将导出到$rootScope。 作者这样做是为了使这些功能可以从HTML文件中访问。例如,

RSApp.run(function ($rootScope) {
    $rootScope.toTime = function (date)     { return moment(date).format('HH:mm:ss'); };
    $rootScope.toCalendar = function (date) { return moment(date).calendar(); };
    $rootScope.fromNow = function (date)    { return moment(date).fromNow(); };
    ...

不是像这样污染$rootScope,而是考虑简单地公开moment本身,并在HTML中调用特定的moment.js函数。

RSApp.run(function ($rootScope) {
    $rootScope.moment = moment;

我的问题是,将moment暴露给$rootScope这样被认为是良好做法吗?

2 个答案:

答案 0 :(得分:3)

不,不是。实际上这是一个非常糟糕的做法。公开功能的更好方法是servicesfactories

问题是范围是双向数据绑定的脏检查的一部分,如果你添加更多不属于范围的东西,那么在消化循环期间只需要额外的垃圾来检查angularjs。

您可以使用以下内容:

angular.module('myMod')
  .factory('dateUtil', function() {
    return {
      toTime: function(date) { 
        return moment(date).format('HH:mm:ss'); 
      },
      toCalendar: function(date) { 
        return moment(date).calendar(); 
      },
      fromNow: function(date) { 
        return
        moment(date).fromNow(); 
      }
    };
  });

另外,如果你想在视图中使用这些帮助器,你想在$rootScope首先暴露它,你应该使用angulajs过滤器,这样你就可以做{{ {1}}您的观点。

例如:

{{ new Date() | toTime }}
  

注意:考虑签出angular-moment它可能有用,它有服务和过滤器已经以angularjs方式使用。

答案 1 :(得分:2)

可以通过创建module.constant service

来设置可注射的时刻
RSApp.constant("moment", moment);

然后在需要的地方注入它:

RSApp.controller("myCtrl", function($scope, moment) {
    //code here
});
  

$rootScope存在,但它可以用于邪恶

     

AngularJS中的作用域形成一个层次结构,原型继承自树顶部的根作用域。通常这可以忽略,因为大多数视图都有自己的控制器,因此也有范围。

     

有时,您希望为整个应用程序提供全局数据。对于这些,您可以注入$rootScope并在其上设置值,就像任何其他范围一样。由于范围继承自根范围,因此这些值可用于附加到ng-show等指令的表达式,就像本地$scope上的值一样。

     

当然,全局状态很糟糕,你应该谨慎使用$rootScope,就像你希望用任何语言的全局变量一样。特别是,不要将它用于代码,仅用于数据。如果您想在$rootScope上添加一项功能,那么将其放入可以在需要的地方注入并且更容易测试的服务几乎总是更好。< / p>      

相反,不要创建一项服务,其唯一目的就是存储和返回数据位。

     

— AngularJS FAQ - $rootScope exists, but it can be used for evil