Question

大家好，我过去几个小时一直在讨价还价，我不知道该怎么办。我正在做一个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;
    }]);

在View中我正在使用它

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

如果我将Timestamp直接放在“end-time”属性中，并且如果我直接在控制器中设置Value，它也可以工作

$scope.startDate = 1431249465000;

但是，如果我这样做的话，它就不起作用了

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

如果你能给我一些想法，我会很高兴为什么要这样做谢谢你！

Answer 1

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

解决方案

我将ng-repeat指令添加到包含我的Item详细信息的父div。只需访问像这样的属性

<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对象数组中的任何一种方式一样，我只有一个Object，因为我根据从$ routeParams传递的ID过滤数据

在promise sucess函数中签名后，AngularJS Value为NaN

1 个答案: