2013-08-28 30 views
0

我正在爲日期倒計時建立簡單指令。但是我卡在這個錯誤語法錯誤:令牌「21」是表達式[2013-08-28 21:10:14] [21:10:14]開始的第12列處的意外令牌

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/

下面的例子是咖啡,因爲腳本在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) 
] 
+0

問題的強烈反對。有一個jsfiddle鏈接是好的,但是你能不能請直接在郵件中包含相關的代碼? –

+0

以及我不能因爲我寫了太多的代碼而無法發送問題 – zajca

回答

3

你需要p使用模型變量來分析數據而不是字符串。

對於其他問題,請看看評論:依賴於外部鏈接

<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

+0

謝謝,真的很有用的解釋。我做了一些改變,這裏是我的最終解決方案:) http://jsfiddle.net/HLQJs/1/ – zajca

相關問題