我正在使用angular和requireJs构建的网站作为文件依赖项。 一个奇怪的事情发生了,没有任何意外的原因ng-click / ng-mouseover / ng-mouseout停止在firefox上工作。他们在IE10和Chrome上继续正常工作。 页面呈现正常,使用控制器和服务,我没有错误,绑定工作。 它唯一的ng事件不起作用,只在firefox上运行。任何人都知道为什么会发生这种情况?我尝试过使用data-ng-event,但是dosn不能正常工作。
HTML:
<div class="btn-group-vertical" role="group" aria-label="Vertical button group" >
<button type="button" class="btn btn-default" ng-repeat="item in data">
<a href="#" data-barid="" data-ng-click="clicked()" data-ng-mouseover="activateBar(item.id)" data-ng-mouseout="defuseBar(item.id)">
{{item.name}}
</a>
</button>
</div>
JS
define([],function(){
function MainPage($scope,$http,horizontalBarChart,verticaltalBarChart){
$scope.data={};
$scope.title = 'title';
$scope.subtitle = 'subtitle';
$scope.activateBar = function(id){
horizontalBarChart.activateBar(id);
}
$scope.defuseBar = function(id){
horizontalBarChart.defuseBar(id);
}
$scope.clicked = function(){
console.log('clicked');
}
//horizontalBarChart.init($scope,'horizon');
}
MainPage.$inject = ['$scope','$http','horizontalBarChart','verticaltalBarChart'];
return MainPage;
});
答案 0 :(得分:1)
好的,所以我得到了这个问题,由于一些未知的原因,我将尝试进一步研究,将鼠标事件指令绑定到元素在ng-repeat循环中不能很好地工作。它在chrome中工作得很好,但无法在firefox&amp; IE浏览器。我怀疑它与浏览器的JS引擎的性能率有关。 Chromes JS引擎是目前最快的,它可以管理元素的重复解析,以及更好地将单独的事件监听器附加到它们。
所以为了解决这个问题我正在使用事件委托,将ng-click / ng-mouseevent附加到wraping元素,在wrap上捕获bubling鼠标事件并在那里处理它。 这也是为性能附加多个事件处理程序的总体良好实践。 wrap将捕获所有子元素事件,并将使用工厂函数触发$ scope上定义的正确函数。您可以确定使用事件对象单击的元素是什么。