Stack Overflow
Stack Overflow

Questions tagged [angularjs-directive]

AngularJS directives are a way to teach HTML new tricks by extending the HTML vocabulary. Directives allow you to manage DOM elements in a declarative pattern, freeing you from low level DOM manipulation tasks.

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion.

Angular comes with a built in set of directives which are useful for building web applications but can be extended such that HTML can be turned into a declarative domain specific language (DSL).

One can create his/her own custom directives in order to have own manipulations according to one's requirement.

Useful links

17477 questions
1090
votes
18 answers

What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: {{text}} From the pane…
iwein
  • 24,288
  • 9
  • 67
  • 108
766
votes
33 answers

How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? More specific requirements: When a Modal is opened, set focus on a predefined inside this Modal. Everytime becomes visible (e.g. by clicking some button), set focus…
Misha Moroshko
  • 148,413
  • 200
  • 467
  • 700
531
votes
6 answers

Link vs compile vs controller

When you create a directive, you can put code into the compiler, the link function or the controller. In the docs, they explain that: compile and link function are used in different phases of the angular cycle controllers are shared between…
schacki
  • 9,176
  • 4
  • 23
  • 28
522
votes
7 answers

When to favor ng-if vs. ng-show/ng-hide?

I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM. Are there guidelines on choosing ng-if over ng-show/ng-hide or vice-versa?
Patrice Chalin
  • 12,220
  • 6
  • 29
  • 43
451
votes
8 answers

Angular directives - when and how to use compile, controller, pre-link and post-link

When writing an Angular directive, one can use any of the following functions to manipulate the DOM behaviour, contents and look of the element on which the directive is declared: compile controller pre-link post-link There seem to be some…
Izhaki
  • 21,638
  • 8
  • 62
  • 96
419
votes
19 answers

How to use a keypress event in AngularJS?

I want to catch the enter key press event on the textbox below. To make it more clear I am using a ng-repeat to populate the tbody. Here is the HTML:
Venkata K. C. Tata
  • 5,263
  • 4
  • 16
  • 33
329
votes
6 answers

How to access parent scope from within a custom directive *with own scope* in AngularJS?

I'm looking for any manner of accessing the "parent" scope within a directive. Any combination of scope, transclude, require, passing in variables (or the scope itself) from above, etc. I'm totally willing to bend over backwards, but I want to…
colllin
  • 8,586
  • 9
  • 44
  • 61
308
votes
26 answers

How to set bootstrap navbar active class with Angular JS?

If I have a navbar in bootstrap with the items Home | About | Contact How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route is at #/ for home #/about for the about…
user1876508
  • 12,054
  • 18
  • 61
  • 99
303
votes
13 answers

What is the best way to conditionally apply attributes in AngularJS?

I need to be able to add for example "contenteditable" to elements, based on a boolean variable on scope. Example use:

{{content.title}}

Would result in contenteditable=true being added to the…
Kenneth Lynne
  • 14,847
  • 11
  • 57
  • 75
298
votes
13 answers

How to call a method defined in an AngularJS directive?

I have a directive, here is the code : .directive('map', function() { return { restrict: 'E', replace: true, template: '
', link: function($scope, element, attrs) { var center = new…
mcbjam
  • 7,018
  • 10
  • 29
  • 40
285
votes
11 answers

AngularJS ng-style with a conditional expression

I am handling my issue like this: ng-style="{ width: getTheValue() }" But to avoid having this function on the controller side, I would much prefer to do something like this: ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }" How can I…
TigrouMeow
  • 3,617
  • 3
  • 24
  • 27
277
votes
3 answers

What is ng-transclude?

I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is. The description in the documentation is as follows: Directive that marks the insertion point for the transcluded DOM of…
Code Whisperer
  • 20,934
  • 17
  • 57
  • 82
265
votes
5 answers

When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

I'm looking for some guidelines that one can use to help determine which type of scope to use when writing a new directive. Ideally, I'd like something similar to a flowchart that walks me through a bunch of questions and out pops the correct answer…
Mark Rajcok
  • 348,511
  • 112
  • 482
  • 482
218
votes
6 answers

How to set an iframe src attribute from a variable in AngularJS

I'm trying to set the src attribute of an iframe from a variable and I can't get it to work... The markup:
213
votes
7 answers

How can I dynamically add a directive in AngularJS?

I have a very boiled down version of what I am doing that gets the problem across. I have a simple directive. Whenever you click an element, it adds another one. However, it needs to be compiled first in order to render it correctly. My research led…
PCoelho
  • 7,042
  • 10
  • 26
  • 35
1
2 3
…
99 100