ng-click 在移动设备上的 Angularjs 问题

Posted

技术标签:

【中文标题】ng-click 在移动设备上的 Angularjs 问题【英文标题】:Angularjs issue with ng-click on mobile 【发布时间】:2014-12-07 07:26:22 【问题描述】:

我遇到了一个很大的性能问题。

我在一个 ng-repeat 块中(并且我正在使用 track by id 来提高性能)。 在这个块中,我正在生成以下 dom:

1) 按钮 1A 按钮 1B 2)按钮2A 按钮2B 3)按钮3A 按钮3B 4)按钮4A 按钮4B 5)按钮5A 按钮5B 6)button6A button6B

该页面中有一些 ng-show 和 ng-disabled,位于通过 ng-click 按钮设置的变量上。

性能很差。 在移动设备上,我们使用 ng-mobile 和\或 fastclick 来消除 300 毫秒的延迟,但在单击按钮后“更新变量和 dom”似乎需要很长时间。

如何提高性能?

非常感谢!

编辑:这是一些代码:

                                  <div class="row" ng-repeat="date in dateRanges track by date.value">

                                          <div ng-show="!date.custom" class="col-xs-14 col-sm-15 date-filter no-rel">
                                              <div class="button-container button-radio"><button data-ng-class="'radiob disabled': getDate() != date,'radiob active': getDate() == date" ng-click="setDate(date)"></button></div>
                                              <div class="button-container button-text">
                                                  <button class="select-date" ng-click="setDate(date)">date.title date.noDetails ? '' : date.start | date:'dd/MM/yyyy' date.noDetails ? '' : '-' date.noDetails ? '' : date.end | date:'dd/MM/yyyy'</button>
                                              </div>
                                          </div>

                                          <div ng-if="date.custom" class="col-xs-2 col-sm-1 date-filter">
                                              <button data-ng-class="'radiob disabled':getDate() != date,'radiob active':getDate() == date" ng-click="setDate(date)"></button>
                                          </div>
                                          <div ng-if="date.custom" class="col-xs-14 col-sm-15 date-filter no-rel">
                                              <div class="row" data-ng-class="'has-error': hasErrorComune && criteriRicerca_DateRange.custom">
                                 </div>                

                                          <div class="col-md-16 mrg-t-10 text-center">
                                              <button id="Undo" ng-click="Undo()" class="btn btn-esci mrg-r-10">Undo</button>

                                              <button type="submit" id="dropdownMovimentiConferma" ng-click="Operation()" data-ng-disabled="criteriRicerca_DateRange.custom && (hasErrorComune || hasErrorStart || hasErrorEnd)" class="btn btn-primary">OK</button>


    </div>

【问题讨论】:

你能给我们看一些代码吗? 【参考方案1】:

您是在真实的移动设备(硬件)或模拟器上进行测试?

如果是真实的,请检查任务管理器和 CPU 利用率。

【讨论】:

我正在真实的移动硬件上进行测试。通过调试,我发现问题出在点击事件

以上是关于ng-click 在移动设备上的 Angularjs 问题的主要内容,如果未能解决你的问题,请参考以下文章

带有波纹动画的 ng-click 在 Safari iOS 上的点击功能与在 PC 上的点击不同

AngularJS - 在 Chrome 中选择文本触发父级中的 ng-click

使用 ng-click 或 jquery 检测平板电脑上的长按

ngDraggable 在拖动结束后避免 ng-click

移动设备上的悬停效果

如何从移动设备上的移动设备获取 console.log 输出?