定時器計數器指令

我寫過這個例子hover counter指令在angularjs中。它可以工作，並將秒數寫入控制檯。它呈現「懸停我0」，但在計數時不更新數字。定時器計數器指令

angular.directive('countHoverTime', function() { 
    return { 
    link: function(scope, element, attributes) { 
     scope.seconds = 0; 
     var ticking = false; 

     var tickTock = function() { 
     scope.seconds++; 
     console.log('tick'); 
     if (ticking) { 
      window.setTimeout(tickTock, 1000); 
     } 
     } 

     $(element).hover(function() { 
     console.log('Hover In'); 
     scope.seconds = 0; 
     ticking = true; 
     tickTock(); 
     }, function() { 
     console.log('Hover Out'); 
     ticking = false; 
     console.log("Seconds: " + scope.seconds); 
     }); 

    } 
    }; 
});

和HTML

<p count-hover-time>Hover me! {{ seconds }} </p>

來源

2014-10-01 linojon

我喜歡apairet關於angularizing的評論，而不是jquery for .hover，但是我仍然需要調用scope。$ apply（）來完成dom更新。 – linojon 2014-10-01 22:33:20

控制檯日誌前寫這篇聲明

scope.$apply();

來源

2014-10-01 20:38:21

對於更改模型反映在視圖，你需要告訴角度說所做的更改。

您應該使用$scope.$apply();來做到這一點。

angular.module('so',[]) 
 

 
.directive('countHoverTime', function() { 
 
    return { 
 
    scope: true, 
 
    link: function(scope, element, attributes) { 
 
     scope.seconds = 0; 
 
     var ticking = false; 
 

 
     var tickTock = function() { 
 
     scope.seconds++; 
 
     scope.$apply(); 
 
     console.log('tick'); 
 
     if (ticking) { 
 
      window.setTimeout(tickTock, 1000); 
 
     } 
 
     } 
 

 
     $(element).hover(function() { 
 
     console.log('Hover In'); 
 
     scope.seconds = 0; 
 
     ticking = true; 
 
     tickTock(); 
 
     }, function() { 
 
     console.log('Hover Out'); 
 
     ticking = false; 
 
     console.log("Seconds: " + scope.seconds); 
 
     }); 
 

 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="so"> 
 
<p count-hover-time>Hover me! {{ seconds }} </p> 
 
</div>

來源

2014-10-01 20:43:09

問題是你正在使用jQuery來處理 '懸停' 事件。 Angular因此不知道scope.seconds已更改，因此無法相應地更新視圖。如果你想繼續使用jQuery的符號（即$(element).hover(function() {...，你必須調用scope.$apply()強行消化週期

我會通過改變

$(element).hover(...)

一個角符號建議修復您：

element.hover(...)

既然你包括jQuery的，這是等同$(element)但「angularized」更多信息，請參見https://docs.angularjs.org/api/ng/function/angular.element！

來源

2014-10-01 20:45:05 apairet

定時器計數器指令

回答

相關問題