I am using urish/angular-spinner but it is not working when I try to use it in controller through $scope.startSpin() and $scope.stopSpin();
Please find my plunker at Plunker. Here the spinner is not appearing at all.
The following is my code for starting and stopping spinner.
$scope.startSpin();
DashboardsDataService.getNetSpendOverTimeData()
.then(function(data) {
$scope.data = data;
$scope.stopSpin();
});
it is very simple you just need to remove the
spinner-key="spinner-1"
and will just work fine!
the final code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script type="text/javascript" src="angular-spinner.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="MainCtrl">
<span us-spinner="{radius:30, width:8, length: 16}" ></span>
<div>
<pre class="code">{{data | json }}</pre>
</div>
</body>
</html>
plnkr
http://plnkr.co/edit/yTIsH9uvD5JZEePMyeAi?p=preview
There's a bug: https://github.com/urish/angular-spinner/issues/26 spinner keys won't work.
What worked for me was registering every spinner in an array: when you call .spin(spinnerName) just add {spinnerName: true} to some controller's array, when you call stop(spinnerName) change it to {spinnerName: false}. Then show/hide the spinner with ng-if based on an expression like ng-if="mySpinners['spinnerName'] == true"
Related
I want to download a file using angular js...
I got one link
[It has code for downloading a file using Plunker][1[1]: Download a file with AngularJS
angularjs/28873580#comment46050222_28873580
when i am trying to download it it says server not found...so i provided another link to download it, then it says download failed..no file there but file is there..
what i am doing wrong!!!!! controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
front view
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x"
src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>
this simplest angular page may help you,
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="test" ng-controller="myCtrl">
<a ng-href="{{fileHref}}" >My PDF</a>
<script>
angular.module('test',[]).controller('myCtrl', function($scope) {
$scope.fileHref = 'https://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
</script>
</body>
</html>
I have been trying to do some proof of concept and I was expecting Plunker to write 4 for the expression {{40/10}} but it never did. What's wrong with it? However I see Scott Allen was able to do so.
Here is my plunker link: https://plnkr.co/edit/OTuxWEMmlWObMgGy9o2Z?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{40/10}}
</body>
</html>
This is because the script you import is Angular 2. If you import Angular 1.x.x, your example will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
If you want to learn how to use Angular 2, look at their website.
You are linking to angular2 while using an angular1 directive ng-app.
Here is a link to a working plnkr link
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
Angular 2 is a complete redesign from angular1, so a code working in Angular 1 will not work in Angular 2.
I'm trying to include select with data loaded from the json inside drawer. I use snap plugin. It works with hardcoded data but it doesn't work when i use dynamic data:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/angular-snap.css" />
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
<script src="js/snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js"></script>
</head>
<body>
<snap-drawer>
<p ng-controller="RandCtrl">
Here's a big random number to show the drawer content
does not reload: <span>{{rand}}</span>
</p>
<select ng-model="correctlySelected"
ng-options="opt as opt.label for opt in options">
</select>
</snap-drawer>
<snap-content id="content">
<ng-view>aaaa</ng-view>
</snap-content>
</body>
</html>
This is my controller:
var app = angular.module('plunker', ['snap']);
app.controller('RandCtrl', function($scope) {
$scope.rand = Math.floor(Math.random() * 1000000);
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
$scope.correctlySelected = $scope.options[1];
});
ng-controller="RandCtrl" // put in body or in all code
plunker <body ng-controller="RandCtrl">
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"
I have the following in my plunker
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<accordion close-others="false">
<accordion-group heading="Company" ng-click="toggleOpen()">
<div class="row" data-ng-repeat="item in companyValues">
<div class="col-xs-6">
<input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
</div>
<div class="col-xs-6 pull-text-left">{{item.name}}</div>
</accordion-group>
</accordion>
</body>
</html>
However, when I try to run I get a 404 on template/accordion/accordion-group.html. Any ideas?
Your markup loads two different versions of ui.bootstrap.
A version with templates for components pre-loaded in Angular.js' $templateCache service.
A version with no pre-loaded templates for if you want to tweak control looks.
Since version #2 is loaded 2nd, it appears that all the pre-loaded templates are not available.
Solution: Delete the line:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
Example: http://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview
When you use angular.ui you also have to include angular.ui.tpls in your dependencies like so:
var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);