在promise成功函数中分配后AngularJS值是NaN答案

【问题标题】：AngularJS Value is NaN after assigned in promise success function在promise成功函数中分配后AngularJS值是NaN
【发布时间】：2015-04-30 11:17:38
【问题描述】：

过去几个小时我一直在努力解决这个问题，我不知道该怎么办。我正在做一个 AngularJS 应用程序，我使用 angular-timer 指令。 http://siddii.github.io/angular-timer/

当我将 TimerValue 值动态分配给 ng-repeat 中的 end-time 属性时，它可以完美运行。但是当我在使用 routeParams 的“我的详细信息”页面中使用它时它失败了

<timer end-time="itemDetail.startDate">

所以当用户点击某处他被重定向到 /someurl/1 时，详细页面上的页面加载正常 iMages 文本一切正常。但是 timerValue 到处都显示 NaN 是我一直在使用的应用程序结构

JSON 数据

[   
    {
        "id" : "1",
        "productTitle" : "Motorola 156 MX-VL",
        "imgUrl" : "app/assets/images/laptop.png",
        "itemPrice" : "170",
        "startDate" : 1431249465000
    }
]

页面控制器

app.controller('detailsController',  ['$scope', '$routeParams','itemsService',
  function($scope, $routeParams,itemsService) {
    itemsService.getItemById($routeParams.itemId).then(function(data){
        $scope.itemDetail = data;
    });
 }]);

工厂

app.factory('itemsService',  ['$http','$filter',  function($http, $filter){
    var itemsService = {
            getAllItems: function() {
              // $http returns a promise, which has a then function, which also returns a promise
              var promise = $http.get('app/jsons/items.json').then(function (response) {
                return response.data;
              });
              // Return the promise to the controller
              return promise;
            }, getItemById : function(id) {
                var promise = $http.get('app/jsons/items.json').then(function (response) {

                    return $filter('filter')(response.data, {id: id})[0];
                 });
              // Return the promise to the controller

              return promise;

            }
          };
          return itemsService;
    }]);

在视图中我是这样使用它的

<div class="large-12 columns" >
                    Remaning time: <timer end-time="startDate">{{days}} Days, {{hours}} Hours, {{minutes}} Minutes, {{seconds}} Seconds.</timer>
                </div>

如果我将时间戳直接放在“结束时间”属性中，则计时器可以工作，如果我直接在控制器中分配值，它也可以工作

$scope.startDate = 1431249465000;

但如果我这样做，它不起作用：

<timer end-time="itemDetail.startDate">

为什么会这样？

【问题讨论】：

检查 itemDetail.startDate 是否为字符串而不是数字
这也没有用：|

标签： angularjs variable-assignment nan angular-promise

【解决方案1】：

结束时间属性需要 eval 表达式

<timer end-time="{{itemDetail.startDate}}">

【讨论】：

这是我在 Nan 问题出现时做的第一件事。在这种情况下，整个页面都在中断

【解决方案2】：

好的，伙计们。我找到了一个对我有用的解决方案，但它非常简单。似乎问题与角度执行其方法的方式有关。当我将过滤对象分配给 $scope.itemDetail=filteredObj 时。当我尝试在 html 中使用 itemDetail.startDate 时，该值没有得到正确解析，我看到了 NaN。因此，当我连接仍在开发中的 Rest api 时，这可能会正常工作，但现在我正在使用带有虚拟数据的模型 json，上帝现在知道 Angular 在幕后发生了什么。我使用的解决方案只是使用 ng-repeat 而不是直接从 html 访问对象属性。它奏效了。

解决办法

我向包含我的项目详细信息的父 div 添加了一个 ng-repeat 指令。并且只需访问这样的属性

<div ng-repeat="item in itemDetails">
{{item.name}}
  Remaning time: <timer end-time="item.StartDate">{{days}} Days, {{hours}} Hours, {{minutes}} Minutes, {{seconds}} Seconds.</timer>
</div>

在这种情况下，它可以按照我的 itemDetails 对象数组中的任何一种方式工作，我只有一个对象，因为我根据从 $routeParams 传递的 ID 过滤数据

【讨论】：