i have ng-click on the ng-drag element, when i am starting to move the element it's everything ok, but when i stop it, that element activate my ng-click, how can i avoid that ng-click?
<div ng-click="unselectImage(image);" ng-drag="true" ng-drag-data="'multipleItems'" ng-center-anchor="true" data-allow-transform="false" ng-drag-success="selectImage(image);"></div>
I am using ngDraggable. I tried to use ng-drag-success without success.
I made a directive (alClick) which is merely ng-click but cancels any click if the press duration is longer than 750ms by default. Therefore, no click or tap event will fire when dragging or swiping.
<div al-click="unselectImage(image);" ng-drag="true" ng-drag-data="'multipleItems'" ng-center-anchor="true" data-allow-transform="false" ng-drag-success="selectImage(image);"></div>
What i did, with help of David Zemens. i figure it out that i can use
$rootScope.$on('draggable:start', function (data) {
isDragging=true;
});
and inside my ng-click function i add something like this:
$scope.unselectImage = function (image) {
if(isDragging) isDragging=false;
else{
// do the magic
}
}
and generally it do the trick. When drag start, it broadcast that it is starting, and when it end's ng-click work out, in our case it simply say that drag is over.
Related
I have a case where in which 2 asides are loaded and I have to clear a variable when the aside is closed pressing ESC or by clicking outside the aside.
I searched online and found that the following code can be used in the case of a modal. What is the code for aside?
scope.$on('modal.hide', function() {
console.log('modal... -hide');
});
How to watch for an Aside closing in angular-strap
The above code is not working for aside.
Is this approach correct? Otherwise, please suggest a method.
In the above case the modal name is not specified. So when we have more than one modal or aside how do we differentiate the closing of the modal or aside? In the current case, I don't have to differentiate the modals. But how to catch the event differently?
Update
The following code woks for aside.
scope.$on('aside.hide', function() {
console.log('aside... -hide');
});
The second question of how to identify each aside closing differently needs to be found out now.
With v2.1.1 of angular-strap the hide event for $aside was changed to aside-hide.
The AngularJS framework invokes handlers of $scope/$rootScope events with arguments:
scope.$on('aside.hide', function(event, data) {
console.log('aside... -hide');
console.log(event);
console.log(data);
});
Use those arguments to get information about the event.
I would like to disable the drag down to close gesture of mdbottomsheet. I've found a work around on scripts but I'm not sure where to put the code. Thanks for the help.
As you say that angular-material doesn't provide any option to disable it, obviously you will have to make changes in its source code.
Now, you haven't mentioned whether you want to disable it at specific places or turn drag-down-to-close for bottomSheets everywhere.
1) In case of latter, it would be quite straightforward, as the only thing you need to do is remove the event listeners for drag events.
If you use angular-material.js file, heres what you can do:
Find the function BottomSheet(element, parent). This function basically registers the drag events which close the sheet. We need make it not attach the listeners.
Reduce it to:
function BottomSheet(element, parent){
return {
element: element,
cleanup: angular.noop
};
}
The cleanup function basically de-registers the listeners on drag event.This function is called when the scope of the bottomSheet is destroyed. To make minimal changes, we have just reduced the cleanup function to do nothing.
2) If you want to be able to pass an option while creating the sheet in your controller, you do the same thing, but conditionally based on the option you pass. Wont write the code because I assume you know how angular works, but here are the steps:
=> Add a boolean variable along with other options(template,scope,etc. ). Lets call it dragDownToClose.
=> In the defaults injector function inside the provider function of MdbottomSheet , assign it a default value (true/false).
=>Pass this along with element and parent during instantiation of BottomSheet() inside the onShow function.
=> So BottomSheet() will now have three argument - dragDownToClose being the new one.
=> As we did in the former case, return the element without any handler attached when the value is false, and let the original function be when its true.
Of-course there are various ways in which you can actually implement this. However, I hope you get the idea.
First, inject $element into your controller. You known what AngularJS $element do, right?
Then we both known that the drag events are registered in BottomSheet
parent.on('$md.dragstart', onDragStart)
.on('$md.drag', onDrag)
.on('$md.dragend', onDragEnd);
So, the simple solution is: Remove those events, override those events... without override the function BottomSheet, right?
$element
.on('$md.dragstart', function (ev) {
return false;
})
.on('$md.drag', function (ev) {
return false;
})
.on('$md.dragend', function (ev) {
return false;
});
Something still wrong here! The backdrop still draggable! So, we do the same for backdrop
var parent = $element.parent();
var backdrop = parent.find('md-backdrop');
backdrop
.on(blah blah blah
These is code in case you are asking for
You can try
$mdBottomSheet.show({
template: *yourTemplate*,
clickOutsideToClose:false
})
this will not let the user close the bottom sheet even with drag or click outside.
I am using the angular-bootstrap's (ui.bootstrap) uib-carousel component with custom template to change the style, text, and functionality of the back and next buttons. I have to perform other actions when the "next" button is touched, in addition to the component's original functionality. Following the method of "capturing" the select event in this answer: How do you Bind to Angular-UI's Carousel Slide Events?, I modified the answer to use the next event.
the html declaration
<uib-carousel template-url="/tpl.html" active="vm.wizardStep" no-wrap="true" on-carousel-next="vm.onNext()" style="height: 395px;">
and the directive like so
.directive('onCarouselNext', function($parse) {
return {
require: '^uibCarousel',
link: function(scope, element, attrs, carouselCtrl) {
var callBack = $parse(attrs.onCarouselNext);
var origNext = carouselCtrl.next;
carouselCtrl.next = function() {
callBack(scope);
return origNext.apply(this, arguments);
};
}
};
});
The uib-carousel's next event does get fired, but it is not calling it through my directive. Just to compare apples to apples, I tried using the code in the answer as-is (i.e. capturing the "select" event), and that does work perfectly and calls my callback function. The reason I need to capture the "next" and can't use the "select" is because I'm using this to set up a "wizard" type framework, and the final "next" is a "done" that needs to do different code.
Anyone done something like this and get it to work?
So seeing as how I was trying to "hijack" the carousel control to turn it in to a wizard control, I ended up just taking the carousel code and changing it completely to fit my needs. If anyone would like to see the code, let me know and I'll put it out on github.
On my web page, I have an array of
<div ng-repeat='img in imgList'>
<div class='img_container' ng-mouseover="show(img)" ng-mouseleave="hide(img)">
<div>one thumbnail</div>
<div class='overlay_edit' ng-show='img.isShowEdit'></div>
</div>
</div>
// from controller
$scope.hide = function hide(img){
img.isShowEdit = false;
}
$scope.show = function show(img){
if(img.metas != undefined && img.metas.length > 0){
// a few lines of codes to use img.metas to
// format the edit div block, omitted for simplicity
// but it does involve calling a REST service call
// to retrieve all meta properties.
img.isShowEdit = true;
}
}
The overlay edit div shows when mouse enters the container div and hides when mouse leaves the container div.
The problem I have is that I see lots of ghost overlays when mouse moves too quickly across many containers.
What would be the best way to tackle this problem?
Edited to add additional info and correct errors.
The problem is that the show() takes some time to complete. If ng-mouseleave trigger takes place before show() completes, ng-mouseleave's trigger has no net effect. When I moved the "img.isShowEdit = true;" to the beginning of show() body it solved the ghost issues. Thanks to Narek for pointing out the show() function as the possible source of issue.
This question already has answers here:
Changing route doesn't scroll to top in the new page
(18 answers)
Closed 8 years ago.
For example:
A user scrolls down on view A;
Then the user clicks on a link, which takes the user to view B;
The view is changes,
but the user's vertical location remains lthe same, and must scroll manually to the top of the screen.
Is it an angular bug?
I wrote a small workaround that uses jquery to scroll to the top; but I don't find the correct event to bind it to.
edit after seeing the comment:
How and WHEN do i pull myself to the top? i'm using jquery but the $viewContentLoaded event is too soon (the method runs, but the page doesn't scroll at that time)
The solution is to add autoscroll="true" to your ngView element:
<div class="ng-view" autoscroll="true"></div>
https://docs.angularjs.org/api/ngRoute/directive/ngView
Angular doesn't automatically scroll to the top when loading a new view, it just keeps the current scroll position.
Here is the workaround I use:
myApp.run(function($rootScope, $window) {
$rootScope.$on('$routeChangeSuccess', function () {
var interval = setInterval(function(){
if (document.readyState == 'complete') {
$window.scrollTo(0, 0);
clearInterval(interval);
}
}, 200);
});
});
Put it in your bootstrap (usually called app.js).
It's a pure javascript solution (it's always better not to use jQuery if it's easy).
Explanation: The script checks every 200ms if the new DOM is fully loaded and then scrolls to the top and stops checking. I tried without this 200ms loop and it sometimes failed to scroll because the page was just not completely displayed.
It seems that you understand why the problem is happening based on #jarrodek's comment.
As for a solution, you could either follow #TongShen's solution of wrapping your function in a $timeout or you can put the function call within the partial that you're loading.
<!-- New partial-->
<div ng-init="scrollToTop()">
</div>
If you view change is fired after a click event, you could also put the function call on that element. Just comes down to timing though. Just depends on how things are set up.