A directive which adds another directive to the same element: Similar answers: How to get ng-class with $dirty working in a directive? creating a new directive with angularjs Here is a plunker: http://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview app.directive(“myDir”, function($compile) { return { priority:1001, // compiles first terminal:true, // prevent lower priority directives to compile after it compile: function(el) { … Read more
@ Text binding: This is used if we want to provide any static text to each instance of our directive. For e.g., any title or specific style/property component that needs to be passed to custom directive that is used to create a dialog. = Two-way binding: This is our normal angular two way data binding. … Read more
No, you don’t need to remove $$watchers, since they will effectively get removed once the scope is destroyed. From Angular’s source code (v1.2.21), Scope‘s $destroy method: $destroy: function() { … if (parent.$$childHead == this) parent.$$childHead = this.$$nextSibling; if (parent.$$childTail == this) parent.$$childTail = this.$$prevSibling; if (this.$$prevSibling) this.$$prevSibling.$$nextSibling = this.$$nextSibling; if (this.$$nextSibling) this.$$nextSibling.$$prevSibling = this.$$prevSibling; … … Read more
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
From docs: Example scenarios of multiple incompatible directives applied to the same element include: Multiple directives requesting isolated scope. Multiple directives publishing a controller under the same name. Multiple directives declared with the transclusion option. Multiple directives attempting to define a template or templateURL. Try removing isolate scope on myDraggable‘s directive: app.directive(‘myDraggable’, [‘$document’, function ($document) … Read more
Your fiddles create three scopes: a scope associated with controller Ctrl, because of ng-controller a directive transcluded scope, because of transclude: true a directive isolate scope, because of scope: { … } In fiddle1, before we type anything into the text box we have the following: Scope 003 is the scope associated with the controller. … Read more
ng-attr-<attrName> Support for conditionally declaring an HTML attribute is included with Angular as the dynamically-titled ng-attr-<attrName> directive. Official Docs for ng-attr Example In your case, the code might look like this: <li id=”{{template._id}}” class=”template-box” type=”template” ng-repeat=”template in templates” ng-attr-draggable=”dragSupported() === true” ></li> Demo JSFiddle This contains examples of usage for the following values: true, false, … Read more
Found it: ang_element = angular.element(element); raw_element = ang_element[0];
Yes, you need to define a directive and define your own parser function: myApp.directive(‘capitalizeFirst’, function($parse) { return { require: ‘ngModel’, link: function(scope, element, attrs, modelCtrl) { var capitalize = function(inputValue) { if (inputValue === undefined) { inputValue=””; } var capitalized = inputValue.charAt(0).toUpperCase() + inputValue.substring(1); if(capitalized !== inputValue) { modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); } return capitalized; } modelCtrl.$parsers.push(capitalize); … Read more
Here’s a trick. Twitter Bootstrap tooltips (that Angular-UI relies upon) have an option to specify the trigger event with an additional attribute as in data-trigger=”mouseenter”. This gives you a way of changing the trigger programmatically (with Angular): <input ng-model=”user.username” name=”username” tooltip=”Some text” tooltip-trigger=”{{{true: ‘mouseenter’, false: ‘never’}[myForm.username.$invalid]}}” /> So when username is $invalid, the tooltip-triggerexpression will … Read more