javascript - 即使使用 ng-cloak， Angular 日期过滤器也显示未定义/NaN

Question

我使用 Angular 日期过滤器显示格式化日期。日期字符串通过 ajax 请求加载，并通过 Controller 上的方法转换为 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 请求加载之前，即使我使用 ng-cloak，浏览器也会显示日期的 undefined NaN, NaN。如果我将 ng-cloak 放在 p 标签上，它没有任何效果。

Answer 1

你得到未定义的NaN，NaN是因为你的

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

函数总是会返回一些东西，你可能想检查传入的“日期”，如下所示:

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

使用 ng-cloak 来隐藏 div 可能很困难，因为其中有一些静态内容(如“by”)。 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>

只有当您在 Controller 中为“post”分配值时，该 div 才会显示