Questions tagged [angularjs]
Use for questions about AngularJS (1.x), the open-source JavaScript framework. Do NOT use this tag for Angular 2 or later versions; instead, use the [angular] tag.
262,490
questions
4510
votes
15
answers
847k
views
"Thinking in AngularJS" if I have a jQuery background? [closed]
Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that ...
3381
votes
30
answers
779k
views
AngularJS: Service vs provider vs factory
What are the differences between a Service, Provider and Factory in AngularJS?
2019
votes
14
answers
355k
views
How does data binding work in AngularJS?
How does data binding work in the AngularJS framework?
I haven't found technical details on their site. It's more or less clear how it works when data is propagated from view to model. But how does ...
1296
votes
19
answers
639k
views
How do I access the $scope variable in browser's console using AngularJS?
I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?
I can neither see $scope nor the name of my module myapp in the console as variables.
1201
votes
23
answers
775k
views
What is the best way to conditionally apply a class?
Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex. What would be the best way to add a class to the li with the ...
1117
votes
6
answers
993k
views
How do I use $scope.$watch and $scope.$apply in AngularJS?
I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful.
What I don't understand specifically:
Are they connected to the DOM?
How can I update DOM ...
1106
votes
15
answers
268k
views
What is the difference between angular-route and angular-ui-router?
I'm planning to use AngularJS in my big applications. So I'm in the process to find out the right modules to use.
What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-...
1099
votes
18
answers
563k
views
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:
<pane bi-title="...
1078
votes
9
answers
343k
views
angular.service vs angular.factory
I have seen both angular.factory() and angular.service() used to declare services; however, I cannot find angular.service anywhere in official documentation.
What is the difference between the two ...
1050
votes
3
answers
155k
views
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
The API Reference Scope page says:
A scope can inherit from a parent scope.
The Developer Guide Scope page says:
A scope (prototypically) inherits properties from its parent scope.
So, does a ...
1050
votes
7
answers
305k
views
'this' vs $scope in AngularJS controllers
In the "Create Components" section of AngularJS's homepage, there is this example:
controller: function($scope, $element) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
...
900
votes
12
answers
613k
views
Working with $scope.$emit and $scope.$on
How can I send my $scope object from one controller to another using .$emit and .$on methods?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
...
858
votes
28
answers
456k
views
AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
I'm finding that I need to update my page to my scope manually more and more since building an application in angular.
The only way I know of to do this is to call $apply() from the scope of my ...
826
votes
17
answers
688k
views
Insert HTML into view from AngularJS controller
Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view?
This comes from a requirement to turn an inconsistent JSON blob into a nested list of id: ...
771
votes
33
answers
636k
views
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 <input> inside this Modal.
Everytime <input&...
719
votes
10
answers
1.2m
views
if else statement in AngularJS templates
I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio.
I want to make a condition like this:
if ...
701
votes
8
answers
576k
views
How to iterate over the keys and values with ng-repeat in AngularJS?
In my controller, I have data like:
$scope.object = data
Now this data is the dictionary with keys and values from json.
I can access the attribute with object.name in the template. Is there any way ...
701
votes
15
answers
208k
views
How do search engines deal with AngularJS applications?
I see two issues with AngularJS application regarding search engines and SEO:
1) What happens with custom tags? Do search engines ignore the whole content within those tags? i.e. suppose I have
<...
689
votes
29
answers
638k
views
How do I bind to list of checkbox values with AngularJS?
I have a few checkboxes:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' ...
665
votes
26
answers
433k
views
Why does AngularJS include an empty option in select?
I've been working with AngularJS for the last few weeks, and the one thing which is really bothering me is that even after trying all permutations or the configuration defined in the specification at ...
657
votes
15
answers
543k
views
How to use a filter in a controller?
I have written a filter function which will return data based on the argument you are passing. I want the same functionality in my controller. Is it possible to reuse the filter function in a ...
627
votes
20
answers
269k
views
Confused about Service vs Factory
As I understand it, when inside a factory I return an object that gets injected into a controller. When inside a service I am dealing with the object using this and not returning anything.
I was ...
593
votes
14
answers
399k
views
Can one AngularJS controller call another?
Is it possible to have one controller use another?
For example:
This HTML document simply prints a message delivered by the MessageCtrl controller in the messageCtrl.js file.
<html xmlns:ng="...
591
votes
12
answers
564k
views
Adding multiple class using ng-class
Can we have multiple expression to add multiple ng-class ?
for eg.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
If yes can anyone put up the example to do ...
589
votes
7
answers
693k
views
AngularJS passing data to $http.get request
I have a function which does a http POST request. The code is specified below. This works fine.
$http({
url: user.update_path,
method: "POST",
data: {user_id: user.id, draft: true}
});
I ...
566
votes
27
answers
459k
views
How do I set the value property in AngularJS' ng-options?
Here is what seems to be bothering a lot of people (including me).
When using the ng-options directive in AngularJS to fill in the options for a <select> tag, I cannot figure out how to set the ...
559
votes
8
answers
251k
views
What's the difference between ng-model and ng-bind
I'm currently learning AngularJS and am having difficulty understanding the difference between ng-bind and ng-model.
Can anyone tell me how they differ and when one should be used over the other?
537
votes
24
answers
173k
views
Combating AngularJS executing controller twice
I understand AngularJS runs through some code twice, sometimes even more, like $watch events, constantly checking model states etc.
However my code:
function MyController($scope, User, local) {
var ...
534
votes
21
answers
430k
views
How can I post data as form data instead of a request payload?
In the code below, the AngularJS $http method calls the URL, and submits the xsrf object as a "Request Payload" (as described in the Chrome debugger network tab). The jQuery $.ajax method does the ...
534
votes
6
answers
241k
views
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 ...
530
votes
7
answers
222k
views
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-...
529
votes
11
answers
942k
views
AngularJS ngClass conditional
Is there any way to make an expression for something like ng-class to be a conditional?
For example, I have tried the following:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">...
528
votes
10
answers
94k
views
What is the difference between Polymer elements and AngularJS directives?
On the Polymer Getting Started page, we see an example of Polymer in action:
<html>
<head>
<!-- 1. Shim missing platform features -->
<script src="polymer-all/platform/...
506
votes
6
answers
122k
views
Complex nesting of partials and templates
My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
The best way to describe my situation is with an image I created:
...
498
votes
11
answers
482k
views
Redirecting to a certain route based on condition
I'm writing a small AngularJS app that has a login view and a main view, configured like so:
$routeProvider
.when('/main' , {templateUrl: 'partials/main.html', controller: MainController})
.when('/...
495
votes
12
answers
846k
views
ng-repeat :filter by single field
I have an array of products that I'm repeating over using ng-repeat and am using
<div ng-repeat="product in products | filter:by_colour">
to filter these products by colour. The filter is ...
484
votes
10
answers
219k
views
AngularJS : Initialize service with asynchronous data
I have an AngularJS service that I want to initialize with some asynchronous data. Something like this:
myModule.service('MyService', function($http) {
var myData = null;
$http.get('data....
480
votes
10
answers
336k
views
Angular ng-repeat Error "Duplicates in a repeater are not allowed."
I am defining a custom filter like so:
<div class="idea item" ng-repeat="item in items" isoatom>
<div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"...
474
votes
19
answers
216k
views
What's the correct way to communicate between controllers in AngularJS?
What's the correct way to communicate between controllers?
I'm currently using a horrible fudge involving window:
function StockSubgroupCtrl($scope, $http) {
$scope.subgroups = [];
$scope....
454
votes
11
answers
192k
views
Watch multiple $scope attributes
Is there a way to subscribe to events on multiple objects using $watch
E.g.
$scope.$watch('item1, item2', function () { });
453
votes
8
answers
155k
views
Angular directives - when and how to use compile, controller, pre-link and post-link [closed]
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
...
452
votes
8
answers
410k
views
How to display length of filtered ng-repeat data
I have a data array which contains many objects (JSON format). The following can be assumed as the contents of this array:
var data = [
{
"name": "Jim",
"age" : 25
},
{
"name": "...
451
votes
8
answers
454k
views
Working with select using AngularJS's ng-options
I have read about it in other posts, but I couldn't figure it out.
I have an array,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', ...
449
votes
18
answers
464k
views
AngularJS 1.2 $injector:modulerr
When using angular 1.2 instead of 1.07 the following piece of code is not valid anymore, why?
'use strict';
var app = angular.module('myapp', []);
app.config(['$routeProvider', '$locationProvider',
...
449
votes
14
answers
160k
views
Does it make sense to use Require.js with Angular.js? [closed]
I'm a newbie to Angular.js and trying to understand how it's different from Backbone.js... We used to manage our packages dependencies with Require.js while using Backbone. Does it make sense to do ...
448
votes
5
answers
286k
views
AngularJS ng-click stopPropagation
I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired.
Here is my code.
<...
433
votes
27
answers
409k
views
Way to ng-repeat defined number of times instead of repeating over array?
Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array?
For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 ...
428
votes
12
answers
319k
views
What is the difference between ng-if and ng-show/ng-hide
I'm trying to understand the difference between ng-if and ng-show/ng-hide, but they look the same to me.
Is there a difference that I should keep in mind choosing to use one or the other?
423
votes
19
answers
497k
views
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:
<td><input type="number" id="closeqty{{$...
422
votes
21
answers
222k
views
AngularJS : How to watch service variables?
I have a service, say:
factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
var service = {
foo: []
};
return service;
}]);
And I would like to use foo to ...