angularjs-directive – Make Me Engineer

angular directive ignore non-numeric input

HTML: <input production-qty type=”text” maxlength=”3″ ng-model=”qty1″> Directive: app.directive(‘productionQty’, function() { return { require: ‘ngModel’, link: function (scope, element, attr, ngModelCtrl) { function fromUser(text) { var transformedInput = text.replace(/[^0-9]/g, ”); console.log(transformedInput); if(transformedInput !== text) { ngModelCtrl.$setViewValue(transformedInput); ngModelCtrl.$render(); } return transformedInput; // or return Number(transformedInput) } ngModelCtrl.$parsers.push(fromUser); } }; }); Plunker See also filters on ng-model in … Read more

Detect unsaved changes and alert user using angularjs

Something like this should do it: <!doctype html> <html ng-app=”myApp”> <head> <script src=”http://code.angularjs.org/1.1.2/angular.min.js”></script> <script type=”text/javascript”> function Ctrl($scope) { var initial = {text: ‘initial value’}; $scope.myModel = angular.copy(initial); $scope.revert = function() { $scope.myModel = angular.copy(initial); $scope.myForm.$setPristine(); } } angular.module(“myApp”, []).directive(‘confirmOnExit’, function() { return { link: function($scope, elem, attrs) { window.onbeforeunload = function(){ if ($scope.myForm.$dirty) { return … Read more

Call a method of a controller from another controller using ‘scope’ in AngularJS

The best approach for you to communicate between the two controllers is to use events. Scope Documentation In this check out $on, $broadcast and $emit. In general use case the usage of angular.element(catapp).scope() was designed for use outside the angular controllers, like within jquery events. Ideally in your usage you would write an event in … Read more

How to Create simple drag and Drop in angularjs

I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/ Code here: https://github.com/logicbomb/lvlDragDrop Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html Here are the directives these rely on a UUID service which I’ve included below: var module = angular.module(“lvl.directives.dragdrop”, [‘lvl.services’]); module.directive(‘lvlDraggable’, [‘$rootScope’, ‘uuid’, function($rootScope, uuid) { return { restrict: ‘A’, link: function(scope, el, attrs, controller) { console.log(“linking draggable element”); … Read more

How to use “ng-repeat” within template of a directive in Angular JS?

Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @ to = and modify the HTML below to make it work: changes to directive code: // … scope: { listcolumns: “=” }, // … changes to template: <div linkedlist listcolumns=”cashAccountsColumns”></div>

AngularJS leaves comments in HTML: is it possible to remove them?

This comment is a result of the element transclusion performed by ngRepeat. Looks like it’s been happening nearly since the dawn of time (in angular terms) and will be created whenever a directive asks for element transclusion. While you certainly could wipe it out with direct HTML manipulation, it’s not a safe thing to do. … Read more

Binding variables from Service/Factory to Controllers

You can’t bind variables. But you can bind variable accessors or objects which contain this variable. Here is fixed jsfiddle. Basically you have to pass to the scope something, which can return/or holds current value. E.g. Factory: app.factory(‘testFactory’, function(){ var countF = 1; return { getCount : function () { return countF; //we need some … Read more

Confirmation dialog on ng-click – AngularJS

If you don’t mind not using ng-click, it works OK. You can just rename it to something else and still read the attribute, while avoiding the click handler being triggered twice problem there is at the moment. http://plnkr.co/edit/YWr6o2?p=preview I think the problem is terminal instructs other directives not to run. Data-binding with {{ }} is … Read more

Call a controller function from a directive without isolated scope in AngularJS

Since the directive is only calling a function (and not trying to set a value on a property), you can use $eval instead of $parse (with a non-isolated scope): scope.$apply(function() { scope.$eval(attrs.confirmAction); }); Or better, simply just use $apply, which will $eval()uate its argument against the scope: scope.$apply(attrs.confirmAction); Fiddle

$apply vs $digest in directive testing

scope.$digest() will fire watchers on the current scope, and on all of its children, too. scope.$apply will evaluate passed function and run $rootScope.$digest(). The first one is faster, as it needs to evaluate watchers for current scope and its children. The second one is slower, as it needs to evaluate watchers for$rootScope and all it’s … Read more

+ More