javascript - 语法错误: Token '21' is an unexpected token at column 12 of the expression [2013-08-28 21:10:14] starting at [21:10:14]

Question

我正在为日期倒计时构建简单的指令。但我陷入了这个错误

Syntax Error: Token '21' is an unexpected token at column 12 of the expression [2013-08-28 21:10:14] starting at [21:10:14]

真的不知道如何让它发挥作用

这是我在 jsfiddle 上的示例

http://jsfiddle.net/5eFTB/1/

这是 CoffeeScript ，因为在 javascript 中代码太多:(

.directive "timer", ["$compile", ($compile) ->
  restrict: "E"
  replace: false
  scope:
   endTimeAttr: "=endTime"

  controller: ($scope, $element) ->
   _second = 1000
   _minute = _second * 60
   _hour = _minute * 60
   _day = _hour * 24
   timer = undefined
   showRemaining = ->
     now = new Date()
     distance = end - now
     if distance < 0
       clearInterval timer
       setExpired "EXPIRED!"
       return
     $scope.days = Math.floor(distance / _day)
     $scope.hours = Math.floor((distance % _day) / _hour)
     $scope.minutes = Math.floor((distance % _hour) / _minute)
     $scope.seconds = Math.floor((distance % _minute) / _second)
   setExpired = (value) ->
     content = angular.element("<div></div>").html(value).contents()
     compiled = $compile(content)
     element.html ""
     element.append content
     compiled scope
     end = new Date($scope.endTime)
   timer = setInterval(showRemaining, 1000)
 ]

Answer 1

您需要使用模型变量而不是字符串来传递数据。

其他问题请查看评论:

<div ng-init="testapp" ng-controller="ctrl">
    <timer end-time="t">{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds</timer>
</div>

app = angular.module('testapp', [])
app.directive('timer', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            endTimeAttr: '=endTime'
        },
        controller: function ($scope, $element) {

            var end = new Date($scope.endTimeAttr); //use endTimeAttr instead of endTime

            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemaining() {
                var now = new Date();
                var distance = end - now;
                if (distance < 0) {
                    clearInterval(timer);
                    setExpired('EXPIRED!');
                    return;
                }
                $scope.days = Math.floor(distance / _day);
                $scope.hours = Math.floor((distance % _day) / _hour);
                $scope.minutes = Math.floor((distance % _hour) / _minute);
                $scope.seconds = Math.floor((distance % _minute) / _second);

                $scope.$apply(); // you need this to refresh the UI by calling $digest
            }

            function setExpired(valur) {
                var content = angular.element('<div></div>').html(value).contents();
                var compiled = $compile(content);
                element.html('');
                element.append(content);
                compiled(scope)
            }

            timer = setInterval(showRemaining, 1000); //doesn't do digest so you need the code $scope.$apply(); above. $timeout does, but it is for one-time only. Unfortunately, there is no corresponding $interval in AngularJS. 
        }
    };
}]);

function ctrl($scope){
    $scope.t = "2013-08-28 21:10:14";
}

Working Demo