javascript - Angular 解析错误 - token 是意外 token

Question

我创建了一个基本的指令来更新div内的时间:

myApp.directive('updateTime', function($timeout, $filter) {
    return function(scope, element, attrs) {
        var timeoutId;

        function updateTime() {
            element.text($filter('dateFromNow')(attrs.updateTime));$()
        }

        scope.$watch(attrs.updateTime, function(value) {
            updateTime();
        });

        function updateLater() {
            timeoutId = $timeout(function() {
                updateTime();
                updateLater();
            }, 5000);
        }

        element.bind('$destroy', function() {
            $timeout.cancel(timeoutId);
        });

        updateLater();
    }
});

我的模型包含一个日期对象，例如 2016-06-03T09:14:57.948Z，但 Angular 似乎提示它采用这种格式。这就是我的数据库(MongoDB)传递日期的方式。

Error: $parse:syntax
Syntax Error
Syntax Error: Token 'T09' is an unexpected token at column 11 of the expression [2016-06-03T09:14:57.948Z] starting at [T09:14:57.948Z].

如何解决此错误？

<强> WORKING EXAMPLE

编辑:

这是我的dateFromNow过滤器。它只是使用 MomentJS 将日期对象(或日期字符串)转换为 time ago 字符串(例如“2 分钟前”):

myApp.filter('dateFromNow', function () {
    return function (date, onlyFromNow) {
        return moment(date).fromNow();
    }
});

在我的控制台中，我可以看到错误发生在指令内的 scope.$watch(.... 内。

Answer 1

从 scope.$watch 抛出错误，因为您正在传递实际值 (2016-06-03T09:14:57.948Z)，而它需要知道以下名称(或路径)变量。

您可以通过一些修改来修复它。

使用您的指令，如下所示:

<div update-time="myTime">

通过解析获取updateTime()中的属性值:

 $parse(attrs.updateTime)(scope)

这需要将 $parse 服务注入(inject)到您的指令中:

.directive('updateTime', function($timeout, $filter, $parse) {
    // ...
})

这是一个工作示例: http://codepen.io/LukaszWiktor/pen/BzNLOM