Update: Disabling the href works better in the link function return. Code below has been updated. aDisabled naturally executes before ngClick because directives are sorted in alphabetical order. When aDisabled is renamed to tagDisabled, the directive does not work. To “disable” the “a” tag, I’d want the following things: href links not to be followed … Read more
No but you can create one. http://jsfiddle.net/FdKKf/ HTML: <img fallback-src=”http://google.com/favicon.ico” ng-src=”{{image}}”/> JS: myApp.directive(‘fallbackSrc’, function () { var fallbackSrc = { link: function postLink(scope, iElement, iAttrs) { iElement.bind(‘error’, function() { angular.element(this).attr(“src”, iAttrs.fallbackSrc); }); } } return fallbackSrc; });
As stated in an official thread about this issue (quickly closed as “won’t fix because it would make directives wait”), a workaround is to wrap your directive in a ng-if : <div ng-if=”myPromiseParam”> <my-directive param=”myPromiseParam”> </div>
AngularJS attempts to make everyone happy! Some people prefer to use data attributes, like data-abc-abc, I assume to keep validators happy. Other people prefer to use namespaces like abc:abc, and others prefer to use the actual directive name abcAbc. Or even all caps ABC_ABC. Or extension attributes like x-abc-abc. AngularJS normalises the name used in … Read more
See angular element api docs. If you use element.scope() you get the element’s scope that you defined in the scope property of your directive. If you use element.isolateScope() you get the entire isolated scope. For example, if your directive looks something like this : scope : { myScopeThingy : ‘=’ }, controller : function($scope){ $scope.myIsolatedThingy … Read more
Implementing custom form controls (using ngModel) Use the ngModel controller and the object form of the require property in the DDO: angular.module(‘myModule’, []) .directive(‘myDirective’, function() { return { restrict: ‘E’, require: { ngModelCtrl: ‘ngModel’ }, scope: { ngModel: ‘<‘ }, bindToController: true, controllerAs: ‘$ctrl’, template: `<div> <button ng-click=”$ctrl.ngModelCtrl.$setViewValue(‘foo’)”> Set foo </button> <button ng-click=”$ctrl.ngModelCtrl.$setViewValue(‘bar’)”> Set bar … Read more
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
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
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
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