i got the following structure:
<div directiveA>
<a href="" directiveB>
</div>
Both directives got an onclick event. The problem is, that if a click on directiveB is performed, a click on directiveA is triggered as well.
How can i prevent this?
Thanks
In the directiveB on the click directive do this this
ng-click=doSomething();$event.stopPropagation()
There is an $event object available for all DOM events supported by angular.
Related
I have a full template
I would like to put a watch on this tempalte, in order to call a function in the controller any time something is clicked inside that template.
I know I have to use a watch (I believe I do) but I don't understand how to to the connection between the full template and the watch.
To do this just add the ng-click directive to your parent element so that every click inside that element evaluates the expression inside the ng-click attribute:
<div class="parent" ng-click="callFunction()">
<div>Hello World</div>
</div>
If you want some clicks inside the parent element to not trigger the parent ng-click you can add $event.stopPropagation() to stop event propagation:
<div class="parent" ng-click="callFunction()">
<div>Clicking here will call parent callFunction()</div>
<div ng-click="$event.stopPropagation();callAnotherFunction();">
Clicking here won´t call parent´s callFunction()
</div>
</div>
I want to load a modal using custom directive when a hyperlink is clicked. but the thing is that hyperlink already defined a ng-click function. Current ng-click function also should work my requirement. How can I do it without changing the ng-click function? Below is my hyperlink.
<a href="#" class="book-btns add-to-cart" data-ng-click="service.addToCart(hotel)" >Add to cart & Continue> </a>
href="javascript:;" should work to disable the default link behaviour.
Create the custom directive so that it binds to "click" on the element.
I have created simple angularJS app.I used ng-repeat to bind data to DOM
<div class="row folder" ng-repeat="f in viewModel.folders">
<div>{{f.name}}</div>
</div>
so weird ,my data not bind to DOM until I click any button with "ng-click" action.
I do not know why ?
I resolved myself by call $scope.apply() at the end.
I'm loading a modal window into my html using magnific popup, which is essentially doing this:
<html ng-app='basket'>
<body ng-controller='BasketController as basket'>
<a id='open' href='/product/1'>Open modal</a>
<a ng-click='addToCart(1)'>Add to cart</a>
</body>
</html>
... After Ajax load
<html ng-app='basket'>
<body ng-controller='BasketController as basket'>
<div class='modal>
<h1>Product title</h1>
<a ng-click='addToCart(1)'>Add to cart</a>
</div>
<a id='open' href='/product/1'>Open modal</a>
<a ng-click='addToCart(1)'>Add to cart</a>
</body>
</html>
But the ng-click inside the modal doesn't fire. Is there a way I can refresh the scope with the modal content included?
To begin with, I thought I'd give it a go by adding an ng-click to the open modal button that can pass the scope to another function that opens the modal. I have a function that can console log the $scope after it has loaded, but I just need to refresh or something to make angular recognise the new html in the modal window.
The reason this doesn't work is because angularJS is not aware of the ng-click inside the modal. It was added by jQuery by the looks of it. AngularJS has not processed that HTMl and the ng-click does nothing.
You can, however, potentially use the $compile function in AngularJS to $compile the modal HTML with a particular scope. Then, the ng-click will work.
Have a read about $compile here:
https://docs.angularjs.org/api/ng/service/$compile
So an example in your case might be:
$compile(modalElement)($scope);
Where this happens inside BasketController, so that would be BasketController passed in to manage modalElement - the raw DOM element, not the jQuery element.
So at some point if you have access to the modal html (just after load) you could do that. Not recommended at all though! Use an Angular library.
I have a directive which contains an iScroll element, which is built with li from an ng-repeat:
<div class="my-film">
<div class="filmstrip-container">
<div class="scroll-wrapper">
<ul class="film-container">
<li ng-repeat="film in films"
ng-mouseover="onMouseOverItem($event)"
ng-mouseleave="onMouseLeaveItem($event)"
ng-click="openFilm()"
class='film-slide'>
...nested videos etc in here.
</li>
</ul>
</div>
</div>
</div>
In the directive's link function I have the onClick function like this
scope.openFilm = function() {
...code to open the film and play
}
This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.
I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?
We're using Angular 1.3, and have ngTouch added.
Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link
The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.
iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc.
That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.
Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).