Question

我已经在angularjs中写了这个示例hover counter指令。它工作，并将秒数写入控制台。它呈现＆＃34; Hover Me 0＆＃34;但在计算时不会更新数字。

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>

Answer 1

在控制台日志写入此语句之前

 scope.$apply();

Answer 2

对于模型的更改会反映在视图中，您需要告诉angular进行了更改。

您应该使用$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>

Answer 3

问题是你正在使用jQuery来处理＆＃39; hover＆＃39;事件。因此Angular不知道scope.seconds已更改并且相应地无法更新视图。如果你想继续使用jQuery表示法（即$(element).hover( function() {...，你必须调用scope.$apply()强制一个摘要周期。

我建议您修改

$(element).hover(...)

以角度表示法：

element.hover(...)

由于你包含了jQuery，这相当于$(element)，但是它已经变得非常混乱了＃39; 有关详细信息，请参阅https://docs.angularjs.org/api/ng/function/angular.element！

定时器计数器指令

3 个答案: