Question

我使用角度日期过滤器显示格式化日期。日期字符串通过ajax请求加载，并通过控制器上的方法转换为Date对象。

<div ng-cloak class="blog-post">
    <h2 class="blog-post-title">{{ post.title }}</h2>
    <p class="blog-post-meta">{{ toDate(post.created_timestamp) | date:'mediumDate' }} by {{ post.author }}</p>

    <p>{{ post.content }}</p>
</div>

blogControllers.controller('BlogDetailController', ['$scope', '$http', '$routeParams',
function ($scope, $http, $routeParams) {
    $http.get('/api/blog/post/' + $routeParams.postId).success(function (data) {
        $scope.post = data;
    });

    /**
     * Turn the string into a Date object
     * @param date
     * @returns {Date}
     */
    $scope.toDate = function(date) {
        return new Date(Date.parse(date));
    }
}]);

在加载ajax请求之前，即使我正在使用undefined NaN, NaN，浏览器也会显示ng-cloak日期。如果我把ng-cloak放在p标签上就没有效果。

Answer 1

你得到undefined NaN, NaN是因为你的

$scope.toDate = function(date) {
        return new Date(Date.parse(date));
    }

功能总会返回一些内容，您可能需要查看＆＃39;日期＆＃39;传递的方式如下：

   $scope.toDate = function(date) {
       if(date)
        return new Date(Date.parse(date));
       else
           return null;
    }

使用ng-cloak可能很难隐藏div，因为你有一些静态内容（如＆＃39; by＆＃39;）。和ng-show会更容易。

尝试

<div ng-show="post">
    <h2 class="blog-post-title">{{ post.title }}</h2>
    <p class="blog-post-meta">{{ toDate(post.created_timestamp) | date:'mediumDate' }} by {{ post.author }}</p>

    <p>{{ post.content }}</p>
</div>

div只会在您将值分配给＆＃39; post＆＃39;在控制器

Answer 2

我建议你尝试的第一件事是检查函数$ scope.toDate（data）是否返回预期值。即将post.created_timestamp传递给函数并查看返回的内容。

如果你得到了正确的价值。此外，如果它还返回时间戳，而不是转换它，您只需添加时间戳和过滤器。

参考：Angularjs date

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。 Angularjs Ng cloak

即使使用ng-cloak，角度日期过滤器也会显示undefined / NaN

2 个答案: