This question already has answers here:
How to preventDefault on anchor tags?
(28 answers)
Closed 8 years ago.
Here's how the code is setup :
<a class="list-group-item" data-ng-click="displayProject()">
<span class="icon" data-ng-click="showChildren()"><i class="icon ion-android-arrow-dropdown"></i> </span>
<span class="icon"><i class="icon ion-folder"></i></span>
<span data-ng-bind="project.name"></span>
</a>
As you can see, I have everything wrapped in an <a> tag, and there's an ng-click event on it. Basically it displays the selected project in another view.
Inside the <a>, I have an icon with another ng-click event, in this case, displaying the children of the specific project.
Of course, if I click on the icon, the displayProject() event is called.
How would I go about cancelling / using preventDefault on the <a> tag when the icon is clicked?
Thank you !
You can have an access to event by passing $event to ng-click callback.
<span class="icon" data-ng-click="showChildren($event)"><i class="icon ion-android-arrow-dropdown"></i> </span>
and in showChildren method:
$event.preventDefault();
Related
I am using angular package angular-xeditable the problem is I want to call its event onaftersave after i edit the label here is my html:
<h4 >{{ title.key || 'empty' }}
<span onaftersave="save()" editable-text="title.key ">
<i class="fa fa-pencil-square-o" "></i></span>
</h4>
the event onaftersave is called even if i click on the edit button and also while typing in the field
what I want is to call the event only when I click the button
Try to use this code this will helps to prevent function call.
<span>
<a onaftersave="save();" data-ng-model="title.key" e-placeholder="Your text" editable-text="title.key">
<span>{{title.key || 'empty'}}</span>
</a>
</span>
I have following code:
<ul class="dropdown-menu">
<li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
<li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
</ul>
I am switching classes if the value is selected. I would like to add an event on icon (which is only visible when its is selected), however, whenever I click on the icon, two ng-click's are triggered. My question is: how can I disable the ng-click on the parent element, when the row is selected?
You need to add $event.stopPropagation() to your inner ng-click:
<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>
This will prevent the ng-click on the parent element from being called.
When you write and event in a DOM element, it's invocation bubbles up to call event attached to all it's parent till HTML tags.
You can prevent this occurrence by preventing the event to propagate further. stopPropagation does exactly that. You can find, details here https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
In your, unselect function, you can call like this
function unselect(event) {
event.stopPropagation();
// Your original code
}
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
I have some code to hide and show slides as follows:
<img ng-src="{{slide}}" ng-repeat="slide in slides" ng-show="$index == onSlide">
<a id="previousButton" type="button" ng-show="onSlide" class="left carousel-control" ng-click="onSlide = onSlide - 1">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="nextButton" type="button" ng-hide="onSlide == slides.length - 1" class="right carousel-control" ng-click="onSlide = onSlide + 1">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
Performance is great when using the buttons, the slides switch immediately. However, if I change scope.onSlide in the controller, there is an extreme delay in the slide switching, although a console.log reveals scope.onSlide is indeed incrementing immediately. What could be causing the lag?
Relevant controller code:
scope.$on("videoTimeChanged", function(event, time) {
if (scope.videoState == "playing") {
if (time > scope.scenario.presentation[0].syncManifest[scope.onSlide]) scope.onSlide++;
}
});
As you can see, I'm listening for a time event, which will fire every 250 ms or so, and comparing the time to the time at which the slide is supposed to change. If the current time is greater, I increment the slide. when i watch the various parts of this in console.log, it all works perfectly behind the scenes.
That probably happens because ng-repeat creates a new scope, and in ng-show you assign a primitive value instead of an object.
Try creating an object in your controller like $scope.carousel.onSlide and assign ng-show to carousel.onSlide instead.
Please do refer to carousel.onSlide inside all ng-clicks as well.
a classic: https://egghead.io/lessons/angularjs-the-dot
In need a directive that does an instantaneous show (without
fade in), and when it gets hidden (ng-show='false'), does a progressive
fade out.
here is my attempt :
http://plnkr.co/edit/bEzAlwjNOsxLodnawu3s?p=preview
<span ng-show="inProgress" class="animate-fade">
<i class="glyphicon glyphicon-ok"></i>
<span ng-if="inProgress">save in progress...</span>
<span ng-if="! inProgress">saved</span>
</span>
You can create a new animation class and define .new-anim to appear, and .new-anim-remove.new-anim-remove-active class selector to animate, although this would require you to use the $animate service.