加載第一頁加載服務 - 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