I have a textarea and a span. The textarea has an ngBlur which calls a function. I only want that function to run its code when the cause of the blur wasn't a click on the span. How can I do that?
http://plnkr.co/edit/ENvuujbychxYum1EMmkf?p=preview
HTML
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='MainController as vm'>
<textarea ng-blur='vm.selective()'></textarea>
<span>span</span>
</body>
</html>
JS
angular
.module('app', [])
.controller('MainController', MainController)
;
function MainController() {
vm.focus = true;
vm.onBlur = function() {
// HOW DO I DO THIS?
// if (spanIsClicked) {
// return;
// }
vm.focus = false;
};
}
I believe you can pass in the DOM element as an argument in angular, looking like :
vm.onBlur = function($event){}
You could then access the event by using event.target. I know this works with ng-click so I'm not totally positive if the same rules apply for ng-blur.
Related
I've a landingpage with dynamic html tags.
The Problem is, that i can't select directly the tag. Its a link.
the following code is the construct:
<div id="testid"><div><div>Button 1<div><div><div>
Every time someone clicks on the link (a-tag) I want to fire an event like the following code:
Button 1
the question: what is the Javascript code to add the onclick="dataLayer.push({'event': 'button1-click'}) attribute to the a tag.
I tried the following code:
var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");
but it seems to the code is incorrect. The a tag is also not the first child; there are 2 divs between :(
Use querySelector and addEventListener:
document.addEventListener('DOMContentLoaded', function () {
var dataLayer = [];
var d = document.querySelector("#testid a[name=button1]");
d.addEventListener("click", function () {
dataLayer.push({ 'event': 'button1-click' });
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="testid">
<div>
<div>
Button 1
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
There's a few things you were missing from your JS.
Using a more specific selector (#testid a[name=button1] vs. the firstchild of #testid, which was not accurate).
Wrapping all the code in a DOMContentLoaded listener. JS that depends on elements on a page needs to wait for the page to build first, that's what DOMContentLoaded is.
Check out my solution. Hope this helps.
var d = document.querySelector("#testid a");
var dataLayer = []
d.onclick = function () {
dataLayer.push({'event': 'button1-click'})
console.log(dataLayer.length)
}
<div id="testid"><div><div>Button 1<div><div><div>
I am trying to implement close on out side click, just like in this example : http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview
But I keep missing something, It is not working in my code.
HTML Directive
<div class='multiDate'>
<div class="dropdown">
<button data-ng-click="show = !show" class="dropbtn">Press</button>
<div id="myDropdown" ng-show="show" class="dropdown-content">
<multiple-date-picker></multiple-date-picker>
</div>
</div>
</div>
HTML Main
<html>
<head>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" />
<script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="cntrl">
<multi-date></multi-date>
</body>
</html>
JS
var app = angular.module("app", ['multipleDatePicker']);
app.controller("cntrl", function($scope) {
});
app.directive('multiDate', function($document) {
return {
templateUrl: 'multi.html',
replace: true,
link: function(scope, element) {
$document.bind('click', function(event) {
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup)
return;
scope.show = false;
scope.$apply();
});
}
}
});
PLNKR
Your plunker code is pretty much working, except the jquery library is not referenced. Add it before the angular library will do.
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
If jquery is not included before angular, angular will use its built in jqLite, which element.find function doesn't work exactly like the one in jquery.
First of all angularjs by default use jquery which was included into page before angularjs or jqLite in other cases.
Secondly jqLite has not all methods, even more, some method's behavior can be different from jquery. See documentation for angular.element
Your example doesn't work due find() - Limited to lookups by tag name. To fix it you have to change condition for isClickedElementChildOfPopup one of possible solutions
var isClickedElementChildOfPopup = event.target.closest(".dropdown") !== null;
but be careful Browser support closest method and polyfill.
new to AngularJS here, just started a new application, but it seems I'm missing something important in regards to controllers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arsenal Roster</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="arsenalApp" ng-controller="ArsenalController">
<input ng-model="name">
<span>{{age}}</span>
</div>
<script>
var arsenalApp=angular.module('arsenalApp',[]);
arsenalApp.controller('ArsenalController',function($scope){
if($scope.name=="jon"){
$scope.age=12;
}else{
$scope.age=1;
}
});
</script>
</body>
</html>
The functionality I want is: if I input 'jon' in the textbox, the output in the browser should change to 12, otherwise, for any other text, it should remain as 1.
As of now it just outputs 1 and doesn't change on entering 'jon'. What am I missing about controllers?
<input ng-model="name" ng-change="onNameChange()">
$scope.onNameChange = function () {
if ($scope.name=="jon") {
$scope.age=12;
} else {
$scope.age=1;
}
}
You need to listen to the change event whenever the name is being changed and the change function should handle your conditions.
Can some body explain me why below directive is not getting called? Its getting called if I directly add the directive to the button. I tried it adding using $timeout but still no luck.
<html>
<head>
<title>AngularJS</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp',[]);
app.controller('MyCtrl',function($scope,$timeout){
document.getElementById('myBtn').setAttribute('my-directive','');
});
app.directive('myDirecitive',function(){
function linkFn (scope,element,attrs){
element.bind('click',function(){
alert('Clicked');
});
}
return {
restrict:'A',
link:linkFn
}
});
</script>
</head>
<body ng-app="MyApp", ng-controller="MyCtrl">
<button id="myBtn">Test</button>
</body>
</html>
app.directive('myDirecitive',function(){
should be
app.directive('myDirective',function(){
it's best not to query the DOM inside the controller. Don't do this
document.getElementById('myBtn').setAttribute('my-directive','');
my-directive was created as an attribute directive, so it would be best to add that directly to the element like this.
<button id="myBtn" my-directive>Test</button>
I created a plunker
https://plnkr.co/edit/pispsMzbJIxrIDyIv81N?p=preview
I've a bootstrap alert that appears after some operation is completed,but I want it to close after two or more seconds,how can I achieve this effect?I'm using Angular.js and I've only found solutions in jQuery.
Thanks.
Angular bootstrap provides an option for alert directive dismiss-on-timeout. It accepts timeout in milliseconds. This attribute requires the presence of the close attribute.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function($scope) {
$scope.show = true;
$scope.closeAlert = function(index) {
$scope.show = false;
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<uib-alert type="danger" close="closeAlert()" ng-if="show" dismiss-on-timeout="4000">Oh snap! Change a few things up and try submitting again.</uib-alert>
</div>
</body>
</html>