>我已经用我的小部件启用了展开和折叠,该小部件附加到可拖动指令。这工作正常。
问题:
展开和折叠已在 ng-click 事件中添加,因此当用户拖动小部件并将其放下时,ng-click 也会被触发。我不希望当用户拖动小部件时触发ng-click。
这是我的代码:
.HTML:
<div plumb-item ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.left, 'top':widget.top, 'width':widget.width }" data-identifier="{{widget.id}}" resizeable>
<p ng-if="widget.divider">{{widget.chartConfig.title.text}}</p>
<md-card ng-if="!widget.expanded && !widget.divider" ng-click="widget.expanded = !widget.expanded" ng-mouseover="hover = true" ng-mouseout="hover = false">
<md-item layout="row">
<div class="collapsed-row" layout="row" layout-align="start center" flex>
<div class="md-toolbar-tools">
<h3>
<span>{{widget.chartConfig.title.text}}</span>
</h3>
</div>
</div>
</md-item>
</md-card>
<md-card ng-if="widget.expanded && !widget.divider" ng-click="widget.expanded = !widget.expanded">
<div layout="column">
<md-card-content>
<highchart id="{{widget.id}}" config="widget.chartConfig" ></highchart>
</md-card-content>
</div>
</md-card>
</div>
.JS:
可拖动.JS
routerApp.directive('draggable', function() {
return {
// A = attribute, E = Element, C = Class and M = HTML Comment
restrict:'A',
//The link function is responsible for registering DOM listeners as well as updating the DOM.
link: function(scope, element, attrs) {
console.log("Let draggable item snap back to previous position");
element.draggable({
// let it go back to its original position
revert:true
});
}
};
});
我做了一个指令(alClick),它只是ng点击,但如果默认情况下按下持续时间超过750ms,则会取消任何点击。因此,拖动或轻扫时不会触发单击或点击事件。
<div al-click="widget.expanded = !widget.expanded"></div>
尝试在指令中添加它
routerApp.directive('draggable', function() {
return {
// A = attribute, E = Element, C = Class and M = HTML Comment
restrict:'A',
//The link function is responsible for registering DOM listeners as well as updating the DOM.
link: function(scope, element, attrs) {
console.log("Let draggable item snap back to previous position");
element.draggable({
stop:function(event,ui) {
console.log("Check if its printing")
event.stopPropagation();
},
// let it go back to its original position
revert:true
});
}
};
});
这会阻止事件的进一步传播,因此可能会停止不需要的点击