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

17531 questions
123
votes
12 answers

Unit Testing AngularJS directive with templateUrl

Using AngularJS. Have a directive. Directive defines templateUrl. Directive needs unit testing. Currently unit testing with Jasmine. This recommends code like: describe('module: my.module', function () { beforeEach(module('my.module')); …
Jesus is Lord
  • 14,971
  • 11
  • 66
  • 97
121
votes
40 answers

Angular2 - Input Field To Accept Only Numbers

In Angular 2, how can I mask an input field (textbox) such that it accepts only numbers and not alphabetical characters? I have the following HTML input:
Aniruddha Pondhe
  • 1,830
  • 3
  • 17
  • 30
121
votes
11 answers

Select text on input focus

I have a text input. When the input receives focus I want to select the text inside of the input. With jQuery I'd do it this way: $("input[type=text]").click(function() { $(this).select(); // would select…
Billy Coover
  • 3,827
  • 5
  • 36
  • 50
119
votes
15 answers

Angularjs loading screen on ajax request

Using Angularjs , I need to show a loading screen (a simple spinner) until ajax request is complete. Please suggest any idea with a code snippet.
Badhrinath Canessane
  • 3,408
  • 2
  • 24
  • 38
117
votes
4 answers

Call method in directive controller from other controller

I have a directive that has its own controller. See the below code: var popdown = angular.module('xModules',[]); popdown.directive('popdown', function () { var PopdownController = function ($scope) { this.scope = $scope; } …
user253530
  • 2,583
  • 13
  • 44
  • 61
114
votes
5 answers

Extending AngularJs Directive

I'd like to make a minor modification to a 3rd party directive (specifically Angular UI Bootstrap). I simply want to add to the scope of the pane directive: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope',…
Kyle Cureau
  • 19,028
  • 23
  • 75
  • 104
112
votes
4 answers

Why is `replace` property deprecated in AngularJS directives?

According to the API docs, directives' replace attribute is deprecated, so in the future, all directives will behave with the current default of replace: false. This removes developers' ability to replace an element directive's element, with no…
sbleon
  • 1,685
  • 2
  • 13
  • 20
112
votes
2 answers

AngularJS : Differences among = & @ in directive scope?

Creating an isolate scope inside a directive lets us map the outer scope to the inner scope. We have seen six different ways to map to attrbutes: =attr &attr @attr = & @ What do each of these scope mapping options do?
Shaun Luttin
  • 133,272
  • 81
  • 405
  • 467
111
votes
3 answers

How to select an element by classname using jqLite?

I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per…
Lior
  • 40,466
  • 12
  • 38
  • 40
103
votes
7 answers

angularjs directive call function specified in attribute and pass an argument to it

I want to create a directive that links to an attribute. The attribute specifies the function that should be called on the scope. But I also want to pass an argument to the function that is determined inside the link function.
rekna
  • 5,313
  • 7
  • 45
  • 54
101
votes
5 answers

AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

I have two controllers and share data between them with an app.factory function. The first controller adds a widget in the model array (pluginsDisplayed) when a link is clicked. The widget is pushed into the array and this change is reflected into…
janesconference
  • 6,333
  • 8
  • 55
  • 73
101
votes
2 answers

Easiest way to pass an AngularJS scope variable from directive to controller?

What is the easiest way to pass an AngularJS scope variable from directive to controller? All of the examples that I've seen seem so complex, isn't there a way I can access a controller from a directive, and set one of it's scope variables?
winduptoy
  • 5,366
  • 11
  • 49
  • 67
98
votes
2 answers

$apply vs $digest in directive testing

If I have a directive that responds to the status of a particular attribute on the scope, and I want to change that attribute in my test and verify that it responds correctly, which is the best way of doing that change? I've seen both these…
Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
97
votes
17 answers

How do I restrict an input to only accept numbers?

I am using ngChange in AngularJS to trigger a custom function that will remove any letters the user adds to the input. The problem is that I need to target the input that…
Chris Bier
  • 14,183
  • 17
  • 67
  • 103
96
votes
6 answers

angular ng-bind-html and directive within it

Plunker Link I have a element which I would like to bind html to it.
That works. Now, along with it I also have a directive which is bound to the bound html: $scope.details = 'Success!
Amitava
  • 5,013
  • 9
  • 37
  • 50
1 2
3
…
99 100