Whenever any element inside my DIV is clicked I want to execute a function in Angular controller.
How to do this?
Basically I am looking to place a ng-click on DIV element and expect the ng-click event be called when any/all elements nested inside the div are clicked.
How to achieve this requirement?
Here both the container and the button has click events. When you click the button, the click event of its parent will also be triggered. This is called Event Bubbling in JavaScript
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.clicked = function() {
console.log("Clicked Me");
};
$scope.secondclick = function() {
console.log("Button Clicked")
}
});
.container {
width: 100%;
height: 300px;
background: cyan;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container" ng-click="clicked()">
<button ng-click="secondclick()">Click Me</button>
</div>
</div>
Related
I'm trying to do angular (1.3.14) directive to handle scrolling event on element like this
var app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log(element.className); // return 'undefined'
element.on('scroll', function(e) {
console.log('scroll'); //not working
});
element.on('click', function(e) {
console.log('click'); //working
});
}
}
});
My problem is that scroll event doesn't fire. Every other event like clicking is normaly working, but scrolling not. Also when I try to get class of element I get 'undefined' and my element has class. It's html:
<body ng-app="myApp" ng-controller="myCtrl" ng-keydown="keyListener($event)">
<section class="dark content second" scroll="">
</section>
</body>
I don't know what can be wrong here.
Your directive is right, I've made a test with an internal div in your section with some classes to make it scrollable
<section class="dark content second" scroll="">
Hi
<div class="internal">
Something
</div>
</section>
CSS
.second{
background-color: red;
max-height: 150px;
overflow-y:scroll;
}
.internal{
height: 200px;
}
And the event works perfectly! You just have to make your <section> scrollable or apply the directive in the body/html tag. Here's the Plunker example that I've tested http://plnkr.co/edit/hp2BbnLeGjtwIbfi2mqZ?p=preview
Try this
console.log(attrs.class);
element.bind('scroll', function() {
console.log('scroll');
});
I have this code:
$(function() {
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
return false;
});
});
Which works great and shows the '.toggle4' div but I want to hide it again when clicking outside/away from it.
So I added this:
$(document).click(function() {
$(".toggle4").hide();
});
Which works but it hides the div even when I click inside of the '.toggle4' div (it's an input box for a search form).
Any ideas? Thanks.
That's because when you click inside of .toggle4 that click event bubbles up the DOM and triggers the event you bound to the document. You should be able to fix that with something like:
$('.toggle4').click(function(e){
e.stopPropagation()
})
One possibility is to prevent the click event from bubbling up to the document if it took place inside the toggle.
$(function() {
$('#searchField').click(function() {
$('#toggle').slideToggle('fast');
return false;
});
});
$(document).click(function() {
$("#toggle").hide();
});
$("#toggle").click(function(e) {
e.stopPropagation();
});
#toggle {
width: 100px;
height: 100px;
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchField">
<div id="toggle" class="toggle4"></div>
I am trying to emulate a click event on a file input in AngularJS. I have seen working jQuery examples, but I don't want to use jQuery.
'use strict';
angular.module('MyApp', []).
controller('MyCtrl', function($scope) {
$scope.click = function() {
setTimeout(function() {
var element = angular.element(document.getElementById('input'));
element.triggerHandler('click');
$scope.clicked = true;
}, 0);
};
});
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<input id="input" type="file"/>
<button ng-click="click()">Click me!</button>
<div ng-if="clicked">Clicked</div>
</div>
Note: For some reason the button needs to be pressed twice in order to trigger the timeout function.
I am using setTimeout because of this post.
How do I programmatically click a file input with just AngularJS / vanilla JavaScript?
You can simply use
<button type="button" onclick="document.getElementById('input').click()">Click me!</button>
OR
$scope.click = function() {
setTimeout(function() {
document.getElementById('input').click()
$scope.clicked = true;
}, 0);
};
Here's how to trigger file of type 'file' or open select-file window when click on icon, button or span as you like ;)
css :
.attachImageForCommentsIcon{
padding-top: 14px;
padding-right: 6px;
outline:none;
cursor:pointer;
}
HTML :
<input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>
all credits goes for this answer :
https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box
Thus, we customized file input tag using this way.
Let's say I have a DIV with a function specified to be called when clicked on it by ng-click.
Inside this DIV there's a BUTTON which also have a function to be called when clicked on, specified by ng-click.
When I click the button, both the DIV's click and the BUTTON's click functions are called.
How do I make that only the BUTTON's function is called?
I have set up this fiddle for better illustrate what I mean. Below is the code:
HTML:
<body ng-app="Test">
<section ng-controller="TestCtrl as ctrl">
<div class="square" ng-click="ctrl.divClick()">
<span>My text</span>
<button ng-click="ctrl.buttonClick()" >My button</button>
</div>
</section>
</body>
JavaScript:
(function() {
var app = angular.module('Test', []);
app.controller('TestCtrl', [function() {
this.divClick = function() {
alert('div clicked');
};
this.buttonClick = function() {
alert('button clicked');
}
}]);
})();
EDIT:
As suggested by akonsu, I just need to stop the event propagation. This worked for me.
Here's an updated Fiddle showing how it works.
Just stop propagation of the event:
<button ng-click="ctrl.buttonClick($event)">
this.buttonClick = function(e) {
e.stopPropagation();
alert('button clicked');
}
I wonder how can I stop child onclick event while still triggering the parent onclick event. For example the following structure:
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
if I click "child1" for example, the onclick event for "child1" will not be triggered, however, the onclick event for "parent" will still be triggered.
Thank you very much!
You could just pass the click to the parent?
$('.child1').click(function(e){
e.preventDefault();
$(this).parent('#parent').trigger('click');
});
When you click .child1, it will prevent the default action, and then trigger the click for the parent of child1 with an id of #parent.
Actually - probably ignore the above - as per the comment below it may cause bubbling. All you really need to do is use e.stopPropagation();.
I've created a jsfiddle showing how although the child1 has a click function bound to it, it's being ignored, and so the parent click is only getting picked up.
The simplest way to do this is unbind the child's event handler.
$('#child1').unbind('click');
Here is a solution bin for above issue. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7l
HTML
<div id="parent">
<div id="child1">
Child-1
</div>
<div id="child2">
Child-2
</div>
<div id="child3">
Child-3
</div>
</div>
jQuery
$(function() {
$("#parent").click(function() {
alert("Parent has been clicked too...!");
});
$("#child1").click(function(e) {
e.stopPropagation();
alert("Child-1 has been clicked...!");
});
$("#child2").click(function() {
alert("Child-2 has been clicked...!");
});
$("#child3").click(function() {
alert("Child-3 has been clicked...!");
});
});
CSS
#parent{
padding:5px;
background:#a34477;
width:140px;
text-align:center;
padding:10px;
}
#parent div{
border:1px solid #2211a4;
background:#a3a5dc;
width:100px;
text-align:center;
font-size:14px;
margin-left:10px;
margin-top:3px;
}
Demo: http://codebins.com/bin/4ldqp7l
do you mean:
$('#parent').on('click', function(e) {
if( e.target !== this ) {
return;
}
});