I'm trying to use angular-spinner with Angular JS 1.5.x in Chrome and every thing I try, every Plunker I find (even the one linked to the project page) fails with one error or another.
One discussion I found said I shouldn't load spin.js myself in a <script> tag but if I don't, how is it supposed to be loaded? When I don't I get an error that Spinner (or i in the minimized code) isn't a constructor. I feel like I must be missing something obvious but I've been searching and testing for hours and I don't feel any closer to a solution.
I actually don't care if I use this package, I just want a spinner so if angular-spinner is deprecated and there is a working alternative, I'm happy for the pointer. Thanks.
Use version 2 of spin.js:
<script type="text/javascript" src="//unpkg.com/angular/angular.js"></script>
<script type="text/javascript" src="//unpkg.com/spin.js#2"></script>
<script type="text/javascript" src="//unpkg.com/angular-spinner"></script>
The DEMO
var app = angular.module('myapp', ['angularSpinner']);
app.controller('MyController', ['$scope', 'usSpinnerService', '$rootScope',
function($scope, usSpinnerService, $rootScope) {
$scope.startcounter = 0;
$scope.startSpin = function() {
if (!$scope.spinneractive) {
usSpinnerService.spin('spinner-1');
$scope.startcounter++;
}
};
$scope.stopSpin = function() {
if ($scope.spinneractive) {
usSpinnerService.stop('spinner-1');
}
};
$scope.spinneractive = false;
$rootScope.$on('us-spinner:spin', function(event, key) {
$scope.spinneractive = true;
});
$rootScope.$on('us-spinner:stop', function(event, key) {
$scope.spinneractive = false;
});
}
]);
<script type="text/javascript" src="//unpkg.com/angular/angular.js"></script>
<script type="text/javascript" src="//unpkg.com/spin.js#2"></script>
<script type="text/javascript" src="//unpkg.com/angular-spinner"></script>
<body ng-app="myapp" ng-controller="MyController">
<h1>Hello Spinner!</h1>
<input type="button" ng-click="startSpin()" value="Start spinner" />
<input type="button" ng-click="stopSpin()" value="Stop spinner" />
<br />Spinner active: {{spinneractive}}<br />Started: {{startcounter}} times<br />
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
</body>
There's a bug: https://github.com/urish/angular-spinner/issues/26 spinner keys won't work as intended.
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 am making a tag field in form and I want to make this field autocomplete so that it shows suggestions from my $scope variable i.e local source.
<tags-input ng-model="tModel.tags"></tags-input>
But since my project does not use jquery I cannot use the jquery autocomplete feature.is there any way to make autocomplete using angularJs.
PS: i have searched many answers in stackoverflow but none worked for me.
Here is the basic DEMO on how to implement ui-bootstrap typeahead.I have used async call to fetch type ahead results from function cities($viewValue) instead you can just pass a list object here.
Your HTML will look like this with following scripts
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="plunker">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" class="form-control" uib-typeahead="address for address in cities($viewValue)" />
</div>
</body>
</html>
Your JS controller will have below code.
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('dataProviderService', ['$http', function($http) {
var factory = {};
factory.getCities = function(input) {
return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
params: {
address: input,
sensor: false
}
});
};
return factory;
}]);
app.controller('TypeaheadCtrl', ['$scope', '$log','$http', 'dataProviderService', function($scope, $log,$http, dataProviderService) {
$scope.cities = function(viewValue) {
return dataProviderService.getCities(viewValue).then(function(response) {
return response.data.results.map(function(item) {
return item.formatted_address;
});
});
};
}]);
Try using Angular UI Bootstrap Typeahead directive.
I am getting an strange error while using ngTagInput library:
Error: type property can't be changed.
Here is the screenshot of that error - Error Screenshot.
HTML Code -
<html ng-app="project">
<head>
<link href="/css/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="/css/ng-tags-input.min.css" rel="stylesheet" />
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type="text/javascript" src="/assets/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/js/angular.min.js'></script>
<script src="/js/ng-tags-input.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<form ng-controller="MainCtrl" role="form">
<div class="col-md-12 topM10px">
<tags-input ng-model="formInfo.tags" placeholder="Add a keyword"></tags-input>
</div>
<div class="col-md-12 topM10px">
<div ng-click="submitidea()" class="col-md-3 submitbtn">Submit</div>
</div>
</form>
</body>
</html>
Controller code (app.js)-
var app = angular.module('project', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.formInfo = {};
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
$scope.submitidea = function(){
console.log($scope.formInfo);
}
});
Please someone help. Thanks in advance
You appear to have a conflict between one of more of your libraries. This can probably be resolved by isolating which library is causing the issue (when commented out, the error goes away), and then trying different versions of that library and/or Angular.
I did a fiddle that uses the same version of Bootstrap and jQuery that you are, but is using Angular 1.4.8 instead of 1.5, so I believe the conflict is between jQuery 1.8.1 and Angular v1.5.0-rc.0 since the fiddle works without any errors. Recommend dropping your Angular version down to 1.4.8 and see if that resolves the issue.
Add library angular first
For example:
I can successfully update an Angular expression immediately but it fails upon a button press. I need a little help here.
Here's the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyController">
<button id="myButton">Press</button>
{{myMessage}}
<script>
function setMessage(msg) {
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = msg;
});
}
setMessage("first");
$(document).ready(function() {
$('#myButton').on('click', function( event ){
setMessage("second");
});
});
</script>
</div>
</div>
</body>
</html>
The first call which happens right away correctly updates the expression to "first". However the second call when the button is pressed fails to upate the expression to "second". What am I doing wrong?
First of all, good advice: remove jQuery from the project until you understand well why you should not use jQuery-style development with Angular app. Shortly, Angular has a specific event/parsing/compiling lifecycle that is not the same as just the flow we are used in jQuery projects. Take a look at this thread.
Then what you need to do is to use ngClick directive:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<button ng-click="setMessage('second')">Press</button>
{{myMessage}}
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = 'first';
$scope.setMessage = function(msg) {
$scope.myMessage = msg;
};
});
</script>
Remove the function around your angular module and you should use angular's ng-click directive to update your html on click:
<div ng-app="MyApp">
<div ng-controller="MyController">
<button id="myButton" ng-click="update('second')">Press</button>
{{myMessage}}
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = "first";
$scope.update = function(msg){
$scope.myMessage = msg;
}
});
</script>
</div>
</div>
The documentation for ng-click: https://docs.angularjs.org/api/ng/directive/ngClick
Don't mix jQuery with angularjs, unless is totally needed. See this answer about it
you should use all the events, functions and directives providad by angularjs.
So your coude would look to something like this
<div ng-app="MyApp">
<div ng-controller="MyController">
<button ng-click="setMessage()">Press</button>
{{myMessage}}
<script>
function setMessage(msg) {
angular.module('MyApp', [])
.controller('MyController', function($scope) {
// set the original value for myMessage
$scope.myMessage = "first";
// update with second value
$scope.setMessage = function(){
$scope.myMessage = "second";
}
});
}
</script>
</div>
</div>
Of course you should organize this better, but this is the first approach
The main difference is that if you use the angular events (like ng-click in this case) it will let Angular knows what something has changed and that it has to update/refresh the view.
If you change something with jQuery, unless you force angular to know it (using $scope.$apply()) there is no way that angular knows by itself that the model has changed.
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
I am displaying a string that has HTML code in it:
<div style="font-size: 14px" ng-bind="currentBook.description"></div>
put it displays the HTML code instead of interpreting the elements:
When I use ng-bind and ng-bind-unsafe, it shows nothing.
How can I get the HTML to be parsed?
Addendum
I added a reference to sanitize but ng-bind and ng-bind-unsafe still show nothing:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
Ok, I added the ngSanitize var app = angular.module('app', ['ngSanitize']); and now it works.
It looks like you missed ngSanitize please see demo below
You can find more here
https://docs.angularjs.org/api/ngSanitize/service/$sanitize
var app = angular.module('app', ['ngSanitize']);
app.controller('firstCtrl', function($scope, $sce) {
$scope.currentBook = {
description: "<p>some description</p>"
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div style="font-size: 14px" ng-bind-html="currentBook.description"></div>
</div>
</body>
call apply
$scope.$apply(function () {
$scope.currentBook.description = $sce.trustAsHtml(html);
});