I'm trying to create a simple popover directive in angular but it doesn't seem to be working. I'm not sure why but the directive doesn't seem to get instantiated - I'm not even getting the console.log back:
var core = angular.module('core', []);
core.directive('popover', function(){
return {
restrict: 'A',
link: function (scope, el, attrs) {
var isTouchDevice = !!("ontouchstart" in window);
console.log(isTouchDevice);
if (isTouchDevice) {
el.bind("touchstart", function (e) {
console.log('on mobile');
});
} else {
el.bind("mouseover", function (e) {
console.log('on desktop');
});
}
}
};
});
Using it with the following html:
<div ng-app>
<div popover>hover me</div>
</div>
http://jsfiddle.net/nv8eq7n8/
You need not to wrap the script inside the document on jsfiddle (see the upper-left menu, I set it to no wrap - in <body>). Otherwise, the DOM would be loaded before the JS, and thus you get the missing module error.
And yes, as the other answer said, you need to specify the app name.
Here it is, working all fine: http://jsfiddle.net/wx8ydotr/
You missed the app's name:
<div ng-app="core">
It seems the code isn't loading, i had to change the html to:
<script>
var core = angular.module('core', []);
core.directive('popover', function() {
return {
restrict: 'A',
link: function (scope, el, attrs) {
var isTouchDevice = !!("ontouchstart" in window);
console.log(isTouchDevice);
if (isTouchDevice) {
el.bind("touchstart", function (e) {
console.log('on mobile');
});
} else {
el.bind("mouseover", function (e) {
console.log('on desktop');
});
}
}
};
});
</script>
<div ng-app="core">
<div popover>hover me</div>
</div>
Related
I'm developing an Angular App but I want to catch onclick event without ng-click, I want to use something like that
$scope.onClick(...)
AngularJs use directive to operate dom. you can add a directive like this.
AngularJs
YourApp.directive('testClick', function () {
return {
restrict: 'A',
link: function (scope, element) {
element.onclick = function() {
//do some thing.
}
}
}
})
html
<button test-click>Test Click</button>
Depends on what you're trying to click. If we're talking about normal DOM,you could use the regular, non-angular way of doing this.
I.e.
Assuming for an element like
<div id="elementID" onclick = "clicked">Element</div>
Javascript:
function clicked(){
console.log("I was triggered!");
}
var element = document.getElementById('elementID');
element.onclick = function(){
console.log("I was also triggererd!");
}
Or even use JQuery if you want:
$('#elementID').bind('click', function () {
console.log("I would also be triggered!");
});
Hope this helped!
The only way it worked for me was:
JS:
.directive('testClick', function () {
return {
restrict: 'A',
link: function (scope, element) {
element.on('click', function() {
console.log('Clicked');
})
}
}
})
HTML:
<button test-click> Here </button>
I'm new to AngularJs and learning now, in my current assignment I need to achieve multiple things on ng-click.
To hide and show some DOM elements based on the ng-click
Change the background of the element where the ng-click is applied on, I'm trying to acheive this using a directive.
Mark-up:
<div class="catFilter f6" ng-click="showSubCat = !showSubCat;toggleDropDown()">
Choose A Genre
</div>
<div class="inactive" ng-show="showSubCat" ng-click="hideSubCat = !hideSubCat" ng-hide="!hideSubCat">
</div>
<div class="cat-drop-menu-list" ng-show="showSubCat" ng-hide="!hideSubCat">
</div>
angular directive
retailApp.directive('toggleDropDown', function() {
return function(scope, element, attrs) {
$scope.clickingCallback = function() {
element.css({'background':'url("../images/down-arrow.png") no-repeat 225px 12px;'});
};
element.bind('click', $scope.clickingCallback);
}
});
Issues:
I'm not able to see the directive being applied, i.e., when I click on choose a genre, it is hiding and showing the other two divs, but not changing the back ground.
You can do this a couple ways, with bindings or directives:
http://jsfiddle.net/abjeex75/
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
$scope.show_sub_cat = false;
$scope.show = function () {
$scope.show_sub_cat = true;
}
$scope.hide = function () {
$scope.show_sub_cat = false;
}
});
app.directive('toggleBg', function () {
var directive = {
restrict: 'A',
link: link
}
return directive;
function link(scope, element, attr) {
element.on('click', function () {
element.toggleClass('red');
});
}
});
I am trying to pass some objects to a new browser window. I followed the suggestion from AngularJS: open a new browser window, yet still retain scope and controller, and services
It works on Chrome, but doesn't on IE. My shared objects are always undefined on IE. Any suggestions?
Code for simplified version of what I am trying to do
My parent html
<html ng-app="SampleAngularApp">
<body>
<div ng-controller="popupCtrl">
<my-popup foo="foo" abc="abc">Open Popup from here</my-popup>
</div>
</body>
</html>
My parent JS
var SampleAngularApp = angular.module('SampleAngularApp', []);
var popupCtrl = function ($scope) {
$scope.foo = { baz: 'qux' };
$scope.abc = "12345";
};
SampleAngularApp.directive('myPopup', ['$window', function ($window) {
return {
restrict: 'EA',
scope: {
foo: '=',
abc: '='
},
link: function (scope, elem, attrs) {
elem.css({ 'cursor': 'pointer' });
elem.bind('click', function () {
var popWdw = $window.open("popupWindow.html", "popupWindow", "width=500,height=500,left=100,top=100,location=no");
popWdw.abc = scope.abc;
popWdw.foo = JSON.stringify(scope.foo);
});
}
};
}]);
My popup html
<html ng-app="PopupApp">
<body ng-controller="childCtrl">
</body>
</html>
My popup JS
var PopupApp = angular.module('PopupApp', []);
var childCtrl = function ($scope) {
alert(window.foo);
};
PopupApp.controller(childCtrl);
Per shaunhusain and Sunil D's suggestions, I have changed my code as below and it works
My parent JS
link: function (scope, elem, attrs) {
elem.css({ 'cursor': 'pointer' });
elem.bind('click', function () {
$window.abc = scope.abc;
$window.foo = JSON.stringify(scope.foo);
var popWdw = $window.open("popupWindow.html", "popupWindow", "width=500,height=500,left=100,top=100,location=no");
});
}
My popup JS
var childCtrl = function ($scope) {
alert(window.opener.foo);
};
I have an angularUi modal window wrapped in a directive:
html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="main.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div my-modal="{ data: 'test2'}">test2</div>
</body>
</html>
javascript:
angular.module('plunker', ['ui.bootstrap', 'myModal']);
angular.module("myModal", []).directive("myModal", function ($modal) {
"use strict";
return {
template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
replace: true,
transclude: true,
scope: {
rowData: '&myModal'
},
link: function (scope, element, attrs) {
scope.clickMe = function () {
$modal.open({
template: "<div>Created By:" + scope.rowData().data + "</div>"
+ "<div class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
+ "</div>",
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ test: "test"});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
}
};
});
plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
I want to make the modal draggable and resizable. I searched through the internet and was able to find the following solution for implementing draggable:
http://plnkr.co/edit/jHS4SJ?p=preview
This is the important part:
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
but was not able to make it work with my example. Can someone help me with this? I wonder is it possible to use jqueryui modal wrapped in a directive (instead of bootstrap) ? I am not very good at javascript and will be very greatefull for any working example with both options. Thanks
EDIT:
I added jqueryui reference and managed to make the modal draggable by adding this line:
$(".modal-dialog").draggable();
The problem is that I am not sure when to add this line. In the moment I have added this in the cancel method (just to make it work):
$scope.cancel = function () {
$(".modal-dialog").draggable();
};
So when the modal is opened I need to call cancel and only then the modal is draggable. If I call it earlier the .modal-dialog does not yer exist. Suggestions?
updated plunker:
http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
I am missing something little, can someome provide working example ?
I've created a native directive to make the modal draggable. You only need AngularJs and jQuery. The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header.
.directive('modalDialog', function(){
return {
restrict: 'AC',
link: function($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
header.on('mousedown', (mouseDownEvent) => {
var modalDialog = element;
var offset = header.offset();
modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
$("." + draggableStr, modalDialog.parents()).offset({
top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
});
}).on('mouseup', () => {
modalDialog.removeClass(draggableStr);
});
});
}
}
});
If you don't want to modify built-in templates you can write a directive that targets modalWindow:
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts.
NOTE: Also keep in mind that newer versions of Angular UI bootstrap have been prefixed with "uib" so "modalWindow" becomes "uibModalWindow" with thanks to #valepu
I combined the two above answers and made my modal dragable.
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
an Angular UI modal with a draggable title bar
NOTE: have to load both jQuery and jQuery UI before AngularJS scripts.
angular.module('xxApp')
.directive('uibModalWindow', function () {
return {
restrict: 'EA',
link: function (scope, element) {
$('.modal-content').draggable({handle: ".modal-header"});
}
}
});
Thank you for your examples. I little bit polished your code and this is my final result. to my solution it works perfectly :-)
HTML:
<div class="draggableModal ui-widget-content">
<div class="modal-header">
...
</div>
</div>
angular.module('posProductsManager').directive('modalDialog', function () {
var definition = {
restrict: 'AC',
link: function ($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
var modalDialog = element;
var clickPosition = null;
var clickOffset = null;
header[0].addEventListener('mousedown', function (position) {
clickPosition = position;
clickOffset = position;
window.addEventListener('mouseup', mouseUpEvent);
window.addEventListener('mousemove', mouseMoveEvent);
});
function mouseUpEvent() {
clickPosition = null;
window.removeEventListener('mouseup', mouseUpEvent);
window.removeEventListener('mousemove', mouseMoveEvent);
}
function mouseMoveEvent(position) {
var offset = modalDialog.parents().offset();
$("." + draggableStr, modalDialog.parents()).offset({
left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
});
clickPosition = position;
}
}
};
return definition;
});
Try using
$(elem).closest('div.modal-dialog').draggable();
in link function
I have places in my code where I have this:
<input data-ng-disabled="SOME_SCOPE_VARIABLE" />
I would like to be able to use it like this too:
<input data-ng-autofocus="SOME_SCOPE_VARIABLE" />
Or even better, mimicking how ng-style is done:
<input data-ng-attribute="{autofocus: SOME_SCOPE_VARIABLE}" />
Does this exist in the current version of AngularJS? I noticed in the code there's a BOOLEAN_ATTR which gets all the attr's that AngularJS supports. I don't want to modify that in fear of changing versions and forgetting to update.
Update: AngularJS now has an ngFocus directive that evaluates an expression on focus, but I mention it here for the sake of completeness.
The current version of AngularJS doesn't have a focus directive, but it's in the roadmap. Coincidentally, we were talking about this on the mailing list yesterday, and I came up with this:
angular.module('ng').directive('ngFocus', function($timeout) {
return {
link: function ( scope, element, attrs ) {
scope.$watch( attrs.ngFocus, function ( val ) {
if ( angular.isDefined( val ) && val ) {
$timeout( function () { element[0].focus(); } );
}
}, true);
element.bind('blur', function () {
if ( angular.isDefined( attrs.ngFocusLost ) ) {
scope.$apply( attrs.ngFocusLost );
}
});
}
};
});
Which works off a scope variable as you requested:
<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()">
Here's a fiddle: http://jsfiddle.net/ANfJZ/39/
You can do this with the built-in ngAttr attribute bindings.
<input ng-attr-autofocus="{{SOME_SCOPE_VARIABLE}}">
The autofocus attribute will be added if SOME_SCOPE_VARIABLE is defined (even if it's false), and will be removed if it's undefined. So I force falsy values to be undefined.
$scope.SOME_SCOPE_VARIABLE = someVar || undefined;
This directive should do the trick:
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
scope: {'autofocus':'='}
link : function($scope, $element) {
$scope.$watch 'autofocus', function(focus){
if(focus){
$timeout(function() {
$element[0].focus();
});
}
}
}
}
}]);
Taken from here: https://gist.github.com/mlynch/dd407b93ed288d499778
scope.doFocus = function () {
$timeout(function () {
document.getElementById('you_input_id').focus();
});
};
Create a directive like this
.directive('autoFocus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $element) {
$timeout(function () {
$element[0].focus();
});
}
}
<input type="text" auto-focus class="form-control msd-elastic" placeholder="">
What I did is using regular autofocus on my inputs: <input autofocus>
And then I set the focus on the first visible input with autofocus when angular is ready:
angular.element(document).ready(function() {
$('input[autofocus]:visible:first').focus();
});
Hope this helps.
I did it with two custom directives, something like this:
(function(angular) {
'use strict';
/* #ngInject */
function myAutoFocus($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
$timeout(function() {
element[0].focus();
}, 300);
}
};
}
function myFocusable() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var focusMethodName = attrs.myFocusable;
scope[focusMethodName] = function() {
element[0].focus();
};
}
};
}
angular
.module('myFocusUtils', [])
.directive('myAutoFocus', myAutoFocus)
.directive('myFocusable', myFocusable);
}(angular));
If you add attribute my-auto-focus to an element, it will receive focus after 300ms. I set the value to 300 instead of 0 to let other async components to load before setting the focus.
The attribute my-focusable will create a function in the current scope. This function will set focus to the element when called. As it creates something in the scope, be cautious to avoid overriding something.
This way you don't need to add something to Angular's digest cycle (watch) and can do it entirely in the view:
<input my-focusable="focusOnInput"></input>
<button ng-click="focusOnInput()">Click to focus</button>
I created a JSFiddle to show the myFocusable directive: http://jsfiddle.net/8shLj3jc/
For some reason I don't know, the myAutoFocus directive does not work in JSFiddle, but it works in my page.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<div ng-repeat="x in names">
<input ng-attr-focus={{$first}} value="{{x.name + ', ' + x.country }}" />
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('namesCtrl', function($scope) {
$scope.names = [
{name:'x1',country:'y1'},
{name:'x2',country:'y2'},
{name:'x3',country:'y3'}
];
});
myApp.directive("focus", function(){
return {
restrict: "A",
link: function link(scope, element, attrs) {
if(JSON.parse(attrs.focus)){
element[0].focus();
}
}
};
});
</script>
</body>
</html>
had created above custom directive for one of my use case.
always focusses on first input element.
works for ajax data, browser back/forward buttons.
Tested on chrome and firefox(default autofocus is not supported here)
JSON.parse is used to parse string "true" returned from html to boolean true in JS.
another way to use attrs.focus === "true" for if condition.
so without $timeout you can also use auto focus like this -
<input type="text" ng-show="{{condition}}" class='input-class'></input>
angular.element(document).ready(function(){
angular.element('.input-class')[0].focus();
});
Combining whar others mentioned above:
JS Code:
myApp.directive('ngAutofocus', ['$timeout', function ($timeout) {
var linker = function ($scope, element, attrs) {
$scope.$watch('pageLoaded', function (pageLoaded) {
if (pageLoaded) {
$timeout(function () {
element[0].focus();
});
}
});
};
return {
restrict: 'A',
link: linker
};
}]);
HTML:
<input type="text" ng-model="myField" class="input-block-level edit-item" ng-autofocus>
Set pageLoaded to true from your initial load method of the page get:
var loadData = function () {
..
return $http.get(url).then(function (requestResponse) {
$scope.pageLoaded = true;
......
}