问题描述
在我的角度应用程序中,主体的左右两侧分别具有ng-swipe
以切换侧栏.问题是当我的页面上有可滚动的水平DIV时.由于身体滑动,它不会滚动.
In my angular application, the body has a ng-swipe
right and left to toggle a sidebar. The problem is when in my page I have a scrollable horizontal DIV. It won't scroll because of the swipe of the body.
<body ng-swipe-right="sidebar = true" ng-swipe-left="sidebar = false">
<div class="scrollable-x">long content that overflow on x</div>
</body>
有没有办法防止滑动并让子元素滚动?
Is there a way to prevent from swiping and to let the scroll of the child element?
我尝试在div的滑动上设置$event.stopPropagation()
,以便不再滚动滚动条,但内容不会滚动.
I tried to set $event.stopPropagation()
on the swipe of the div so the scrollbar is not toggled anymore but the content won't scroll.
有什么主意吗?
推荐答案
更新
看着 allenhwkim 的答案,他确实是对的,可以很容易地阻止$event
的传播.我认为这是理所当然的(未经检查),将ng-swipe-*
指令附加到其他元素将开始触发单独的事件.我显然是错的.
UPDATE
Looked at allenhwkim's answer and indeed he is correct, that $event
's propagation can be easily stopped. I took it for granted (without checking), that attaching ng-swipe-*
directive to other element will start firing separate events. I was clearly wrong.
这里已更新为小提琴.
stopPropagation
仍然存在一个问题-鼠标向上事件似乎没有触发.
There is still one problem with stopPropagation
-- the mouse up event seems not to fire.
最优雅的解决方案是装饰ng-swipe-*
指令或$swipe
服务-但是查看它们的代码,我认为这是不可能的.
The most elegant solution would be to decorate the ng-swipe-*
directives or $swipe
service -- but looking into their code and I do not think it is possible.
其他选择是创建自己的指令,该指令将手动附加ng-swipe-*
,负责编译过程并提供所需的功能.当然,有点复杂.
Other option would be to create your own directive, that would manually attach ng-swipe-*
, take care of the compilation process and provide desired functionality. Surely, bit complicated.
我想到的是一个快速破解.想法是向元素的后代添加一个属性,该元素的后代不应触发ng-swipe-*
.
What I came up with is a quick hack. The idea is to add an attribute to an element whose descendants should not fire the ng-swipe-*
.
myApp.value('shouldFire', function(element){
var update = true;
// strange enough $event.fromElement is always null
var current = element;
while(current && current != document.body){
if(current.getAttribute('swipe')=='cancel'){
update = false;
break;
}
current = current.parentElement;
}
return update;
})
function MyCtrl($scope, shouldFire) {
$scope.sidebar = false;
$scope.updateSidebar = function($event, show){
var element = $event.toElement || $event.srcElement;
shouldFire(element) && ($scope.sidebar = show);
}
}
html
<div class="cont" ng-swipe-right="updateSidebar($event, true)"
ng-swipe-left="updateSidebar($event, false)">
...
<div class="pan-container" panhandler=""
content-width="500px" swipe="cancel">
- 在android chrome中.v.39 angular-panhandler 已损坏.
- 提出的解决方案是一个快速的技巧-它既不优雅也不通用.尽管如此,从理论上讲,可以通过在
swipe
属性中设置不同的值来支持多个ng-swipe-*
处理程序.
- in android's chrome.v.39 angular-panhandler is broken.
- The proposed solution is a quick hack -- it is neither elegant nor general. Nonetheless, theoretically it could be possible to support multi
ng-swipe-*
handlers by setting different values inswipe
attribute.
这篇关于取消对孩子的ng-swipe-right的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!