我有一个Angular应用,并且正在使用Javascript和超时在按钮上使用活动状态(颜色变化)。在我的服务中这样的事情:

HTML:

<div class="btn-numeric" ng-mousedown="highlightButtonThenAddValue(4, $event)">4</div>


控制器代码:

var abc = [];

var highlightButtonTouch = function (event, addClassName) {
   var element = event.currentTarget;
   var currClasses = element.classList.add(addClassName);
   setTimeout(function () {
   element.classList.remove(addClassName);
   }, 100);


$scope.highlightButtonThenAddValue = function (value, event) {
    log.debug("button pressed on screen, button value: " + value);
    highlightButtonTouch(event, 'btn-numeric-active');
    $scope.add_value(value);
};

$scope.add_value(value) {
    abc.push(value);
    if (abc.length === 6) {
       $state.go(newState);
    }
}


如果按钮的颜色更改处于相同状态,则此方法效果很好。但是,当添加了足够的值时,我需要使用state.go更改状态,在那种情况下,即使在100毫秒后也不会删除类'btn-numeric-active',而是更改CSS以添加btn-numeric-active停留直到状态改变。我在新状态下定义了一些解决方案-我正在向服务器进行API调用。

您只能在“ Chrome性能”标签中将CPU降低至10Xslowdown才能看到此问题。但是我的应用程序应该在运行缓慢的计算机上运行。

有没有人遇到过类似的问题?对于如何解决这个问题,有任何的建议吗 ?

我尝试过的事情:

我不能使用:active伪类,因为即使在未注册单击的情况下进行触摸和拖动,也可以启用活动状态。

我尝试将元素定义为rootScope变量,但这也不能解决问题。

任何建议都欢迎。

最佳答案

您可以尝试将其包装在指令中吗?



angular.module('test', [])
.controller('TestController', TestController)
.directive('fancyButton', fancyButtonDirective);

function TestController() {}

function fancyButtonDirective() {
  return {
    scope: { name: '@' },
    template: '<button type="button" ng-mouseover="highLight()">{{name}}</button>',
    link: function(scope, element, attrs) {
      scope.highLight = function() {
        var button = element.find('button')[0];
        button.classList.add('light');
        setTimeout(function() { button.classList.remove('light'); }, 200);
      }
    }
  }
}

.light {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='TestController'>
  <fancy-button name="Fancy 1"></fancy-button>
</div>

10-05 20:53
查看更多