我有一个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>