Latest Angular.js Recipes

Using multiple AngularJS directives in one div tag

I am unable to use multiple directives in the same div tag. The following html does not display the product names that the module supplies

<!DOCTYPE html>
<html ng-app="gemStore">
    <head>
        <title></title>
        <link rel="stylesheet"...

Read the entire recipe Recipe added 28 minutes ago

Angular.js - ng-model overwrite my ng-value on text-input

I'll start off with mentioning I'm very new to Angular so I'm probably not doing things in the correct "Angular way".

I have the following ng-repeat looping through some data - the correct data is being returned.

<tr ng-repeat="attribute in...

Read the entire recipe Recipe added 1 hour, 26 minutes ago

$window on ngClick directive

Why this doesn't work ?

Since angular expression doesn't have access to window object, i've used $window, however the below doesn't work.

<button ng-click="$window.alert('Hi There')">Hi There</button>

Angular expressions do not have access to...

Read the entire recipe Recipe added 2 hours, 30 minutes ago

How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible

In a table... I have action buttons that appear when the mouse goes over that row by using ng-cloak and ng-show.

The problem is, when the icon appears, it takes up more space than when its not there, and the html around it jumps.

example of problem in action

I even set my...

Read the entire recipe Recipe added 3 hours, 24 minutes ago

grunt serve: concurrent:server aborts due to warnings

suddenly my projects stops working with grunt. Unfortunately, I haven't committed my changes for a while into git, so I can't tell whats different.

When I run grunt server --verbose, I get the following output (everything above ... passes with an...

Read the entire recipe Recipe added 4 hours, 30 minutes ago

How to mock a Service containing a resource in AngularJS

I have a service which contains a resource factory like this:

serviceModule.factory('ProjectResource', ['$resource', function($resource){
    return $resource('/projects/:id.json', {}, {
        'query': {method: 'GET', isArray: true}}
   ...

Read the entire recipe Recipe added 5 hours, 30 minutes ago

How to set dynamic data-title in ngtable (angular plugin)

I want have a multi language view with an ngTable. For do that, i set in my controller a $scope.translate (a valid json) who contains my traductions. In my view i want set my data-title like {{translate.code}} etc...

my view :

<table...

Read the entire recipe Recipe added 6 hours, 25 minutes ago

AngularJS Validation - ng-minlength on textarea

I am working on a project where AngularJS is used heavily for the front-end. Here is what I have:

textarea with buttons underneath

The validation rule I want to have is as follows:

The Next button should be disabled unless the reason inputted is at least 10 characters.

Also, I'd...

Read the entire recipe Recipe added 7 hours, 27 minutes ago

Animate.css and Angularjs ng-hide

I am learning and experimenting with Angularjs and animate.css. I am trying to add animations when the ng-show is true or false. The showing and hiding works but not the animations. Hope someone here can show me what I am doing wrong.

Here is the ...

Read the entire recipe Recipe added 8 hours, 30 minutes ago

Set a default value when ng-repeat finds a null or undefined in angularjs

I am fairly new to AngularJS and I am trying to have my ng-repeat set a default value when a null is found. I tried this solution which I found on another SO page,

<div class="col-sm-12" ng-repeat="data in dataNames">
    {{data.name ||...

Read the entire recipe Recipe added 9 hours, 27 minutes ago

Making a toggle ng-click event

I have been able to create a function to successfully toggle the rows in my ng-table to expand on click, however, when clicking them again they will not hide. The function in the javascript is:

$scope.toggle = function() {
    return...

Read the entire recipe Recipe added 10 hours, 26 minutes ago

Testing AngularUI Bootstrap modal instance controller

This is a somewhat of a follow-on question to this one: Mocking $modal in AngularJS unit tests

The referenced SO is an excellent question with very useful answer. The question I am left with after this however is this: how do I unit test the modal...

Read the entire recipe Recipe added 11 hours, 27 minutes ago

angularjs ui-router authorization before proceeding

I have a angularjs ui-router situation where:

  • User must be authorized before hitting any page
  • If user is authorized and has no route, redirect to their homepage
  • If user is authorized and has a route, redirect to route
  • If user is authorized and has...

Read the entire recipe Recipe added 12 hours, 24 minutes ago

Firefox CORS request giving &#39;Cross-Origin Request Blocked&#39; despite headers

I'm trying to make a simple cross-origin request, and Firefox is consistently blocking it with this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. This can be fixed by moving the...

Read the entire recipe Recipe added 13 hours, 31 minutes ago

How to make $http.get request from within directive controller?

I have an AngularJS directive called product. I need an action to happen whenever I click on a button that's a part of this directive that involves making an $http.get request to my server and doing work on the response. I have a file that appears to...

Read the entire recipe Recipe added 14 hours, 23 minutes ago

Module &#39;ui.bootstrap&#39; is not available - Angularjs

I am facing a strange problem with my angularjs project.

I have a website like - www.server.com/pwm (home page). In the page there is an anchor tag with takes me to another page - www.server.com/publishers. When I load the home page and navigate to...

Read the entire recipe Recipe added 15 hours, 23 minutes ago

Can&#39;t change CSS style in AngularJS

For some reasons, I can't change the style of an element using the following :

angular.element("#element").style.height = 100px;

I'm sure that angular.element("#element") works, as it returns a DOM element. Plus, this works...

Read the entire recipe Recipe added 16 hours, 27 minutes ago

Get the full call stack trace of $http calls

Let's say someone wrote a method like this in a file called app.js trying to peform an XHR request angainst a non existing url:

app.controller('MainCtrl', function($scope,$http) {
  $scope.send = function() {
   ...

Read the entire recipe Recipe added 17 hours, 23 minutes ago

Open multiple links in Chrome at once as new tabs

I'm trying to open multiple links at once in Google Chrome in new tabs but it fails.

Problems:

  1. Blocked by popup
  2. Open in new windows instead of tab after the user allowed the popup

With this, I can open multiple links at once in...

Read the entire recipe Recipe added 18 hours, 28 minutes ago

AngularJS CORS request custom header

I'm having trouble getting CORS enabled on my server in combination with AngularJS. I'm using Angular 1.2.16 and this is my server config:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type, X-CSRF-Token,...

Read the entire recipe Recipe added 19 hours, 29 minutes ago

Binding an event to $(document) inside an angular directive

I have a directive which implements kind of a select box.
Now when the select box is open and I click somewhere outside of it(anywhere else in the document) I need it to collapse.

This JQuery code works inside my directive, but I want to do it "the...

Read the entire recipe Recipe added 20 hours, 25 minutes ago

AngularJS - accessing ng-click in custom directive

I'm trying to get my head around directives, i can easily use the template function to throw out my HTML, however, if i have an ng-click within my template, how can i access it within the link function?

My directive:

app.directive('directiveScroll',...

Read the entire recipe Recipe added 21 hours, 27 minutes ago

How to show previews of selected documents

How can i show the preview of the document. Is readasDataUrl is also works for previewing the .pdf, .xls files?

var reader = new FileReader();
    reader.readAsDataURL($files[i]);
    reader.onload = function (loadEvent) {
    $scope.$apply(function...

Read the entire recipe Recipe added 22 hours, 28 minutes ago

Declaring complex object in isolated scope

I create a dateRangePicker directive that I declare like this:

<date-range-picker start="schedule.start" end="schedule.end"></date-range-picker>

My directive is declared as the following: ...

Read the entire recipe Recipe added 23 hours, 27 minutes ago

How to apply a function to an angularjs expression inside a controller?

simple question, I would like to apply a function inside my controller scope to an expression.

This is my HTML inside my controller

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate}}</span></p>

This is my...

Read the entire recipe Recipe added 1 day ago