加载第一页加载服务 - AngularJS

Question

与AngularJS和JS在一般情况下很新，所以裸露在我身边。

我得到了它处理日期格式转换的简单AngularJS服务：

'use strict'; 

angular.module('myApp') 
    .service('DateUtils', function() { 

     /** 
     * Convert US -> EU date format OR EU -> US data format 
     * @param date Date format yyyy-MM-dd OR dd-MM-yyyy 
     * @returns {*} opposite of input 
     */ 
     this.simpleDateFormatConverter = function (date) { 
      if (date) { 
       var benchmark = date.substr(0, 4); 

       // Check wether the first four digits are integers (US) 
       var matches = benchmark.match("^[0-9]*$"); 

       // if the date is US simple date format (yyyy-MM-dd) 
       if (matches != null) { 
        var year = date.substr(0, 4); 
        var month = date.substr(5, 2); 
        var day = date.substr(8, 2); 
        // US -> EU 
        return day + "-" + month + "-" + year; 
       } else { 
        var year = date.substr(6, 4); 
        var month = date.substr(3, 2); 
        var day = date.substr(0, 2); 
        // EU -> US 
        return year + "-" + month + "-" + day; 
       } 
      } else { 
       return null; 
      } 

     } 
    }); 

案例：我有一个编辑页面，正在充满了实体的现有数据。 （在这种情况下，出生日期以美国格式）。在我的控制器中，如下所示，我正在注入该服务并使用其功能来转换实体Author的birthDate。

访问编辑页面时，出生日期为美国格式，但刷新页面时，会按照希望进行转换。

'use strict'; 

angular.module('myApp') 
    .controller('AuthorEditController', 
     ['$scope', '$stateParams', 'entity', 'Author', '$state', 'DateUtils', 
      function ($scope, $stateParams, entity, Author, $state, DateUtils) { 

       $scope.error = null; 
       $scope.author = entity; 

       $scope.load = function (id) { 
        Author.get({id: id}, function (result) { 
         $scope.author = result; 
        }); 
       }; 

       // Only working on page reload 
       $scope.author.birthDate = DateUtils.simpleDateFormatConverter($scope.author.birthDate); 

       $scope.save = function() { 
        // save author 
       }; 

      }]); 

是否因为我的数据尚未正确加载，因此当时未定义的数据不能被服务操纵？

我怎样才能确保这是动态完成的第一页加载？

由于提前，

Answer 1

这是因为Author.get（）返回一个promise，因此在分离线程的解决。为了您的代码工作，你应该叫日期转换器的回调函数里面，像这样：

$scope.load = function (id) { 
        Author.get({id: id}, function (result) { 
         $scope.author = result; 
         $scope.author.birthDate = DateUtils.simpleDateFormatConverter($scope.author.birthDate); 

        }); 
       }; 

如果你不熟悉的诺言，你可能要在继续之前做一些研究。

看看： http://andyshora.com/promises-angularjs-explained-as-cartoon.html

Answer 2

有几件事情正在进行。您正在以异步方式加载作者对象，这意味着包含指定$scope.author = result;的回调函数在大多数情况下会在发生转换时触发。正如@Italo Ayres所回答的，您应该在回调函数中执行转换。

行为数据被刷新页面可能是另一个问题后，正确地转换：

看来，Author服务缓存结果，并返回先前返回的对象。所以请注意，您只是修改了仍在Author服务控制之下的对象。当您在其他地方使用该服务时，这可能会导致很难跟踪错误。考虑将您的转换放入服务中（如果这是有意的），或者对您给予的项目进行深层克隆以不影响其他人。如果它只是一个用户界面问题，您还可以添加一个函数，该函数仅转换数据以显示它，而不用修改对象。想想当你保存时对象发生了什么 - 你真的想保存格式化的日期值吗？

Answer 3

使用filter日期是建议多使用工厂

angular.module('myApp').filter('DateUtils', function (date) { 


if (date) { 
       var benchmark = date.substr(0, 4); 

       // Check wether the first four digits are integers (US) 
       var matches = benchmark.match("^[0-9]*$"); 

       // if the date is US simple date format (yyyy-MM-dd) 
       if (matches != null) { 
        var year = date.substr(0, 4); 
        var month = date.substr(5, 2); 
        var day = date.substr(8, 2); 
        // US -> EU 
        var result= day + "-" + month + "-" + year; 
       } else { 
        var year = date.substr(6, 4); 
        var month = date.substr(3, 2); 
        var day = date.substr(0, 2); 
        // EU -> US 
        var result= year + "-" + month + "-" + day; 
       } 
      } else { 
       var result= null; 
      } 



     return function (result) { 

       return result; 

     } 


    } 
}); 

HTML：

<p>{{yourDate | DateUtils }}</p> 

也有天然的角日期formats