I’m using Angular 1.3.15. I’m trying to disable automatic scrolling when the hash changes.
According to the documentation I need to call disableAutoScrolling() on the $anchorScrollProvider. So here’s my code:
var app = angular.module("myApp", [
// ... dependencies here ...
]);
app.config(['$locationProvider', '$anchorScrollProvider', function($locationProvider, $anchorScrollProvider) {
$locationProvider.html5Mode({ enabled: true, requireBase: false });
$anchorScrollProvider.disableAutoScrolling();
}]);
This, however, throws an “undefined is not a function” error on the second to last line.
Any ideas why it’s happening?
Thanks.
Solution is The issue was rather embarrassing (this is the author of the question, BTW).
While looking for a way to disable auto scrolling, some people suggested that the only way to make it actually work was to remove $anchorScroll from the module.
So in one of my controllers I’d added .value($anchorScroll, angular.noop) and forgot about it. Obviously that removed $anchorScroll from my module hence the errors.
Thanks everyone for help. You guided me towards the solution.
Related
Sometimes in my application a HTTP call to get a list or some sort of resource will fail for no obvious reason, however, if it's re-fired straight away it will work.
Is there a way to configure all HTTP calls to say something along the lines of
if ( has no success after 2-3 seconds ) {
re-fire HTTP call...
}
I find in my application (which is ASP.NET) that often times I have to double click a link to make a page load. This I feel is probably the same issue with the HTTP calls in the code. Not sure as to how to trace or de-bug this sort of problem and if anyone had any thoughts on that you would really be helping me out!
Any advice much would be greatly appreciated.
Thanks!
you can do it using an $httpInterceptor, maybe a god solution could be fix the problem instead of that, by the way, there is an example:
this wonderful post maybe help you to understand $http interceptors
(function(window, angular, APP) {
var MAX_ERRORS = 1; // after that: giving up
function FeelAgainConfig($httpProvider) {
$httpProvider.interceptors.push(function FeelAgainInterceptor($q, $http) {
var interceptors = {};
interceptors.responseError = function FeelAgainInterceptorResponseError(data) {
// implement an error counter that helps you to not fall in an infinite call stack
if(data.errorCount >= MAX_ERRORS) {
return $q.reject(data);
};
// Perform the request again;
};
return interceptors;
});
}
APP
.config(FeelAgainConfig)
;
})(window, window.angular, window.angular.module('feelAgain$http', []));
If you're looking to change the behaviour of the $http service in Angular, then there is a way. This post describes it briefly, and here's the important bits citated from the post.:
For example if you are making a late global alteration to a large
ongoing project, or want to change the behavior of XHR requests in
third party code that can't be altered. In these circumstances you
might use $provide.decorator() to globally replace $http with a
wrapped version.
By wrapping the $http servie you have the option to change behaviour.
It sounds like you have a different problem though since you need to trigger calls twice, I suggest you solve that first.
When I set js: true in my test, I get the default website:
"This domain is established to be used for illustrative examples in documents. You may use this"...
But when I dissable js: true, I get my right webpage. Also, I tryed with js_erros: false but does not work.
it 'my tests', js: true do
# ....
end
Anyone knows something about it? Anything to read? I looked for a while for a solution without results.
Any help will be appreciated.
Thanks.
Switch your something_url to something_path.
I was having the same problem and this approach solved it. I hope it helps!
in my app I would like to add functionality to translate page into all languages that user has set in browser and if none of them is available translate into default english... Problem is browser inconsistency with language support. I found a workaround for this, I make a http call to some webservice which returns user languages. It is done in app.run
app.run(function($rootScope, UserDataService, $translate){
UserDataService.getUserBrowserLanguage().then(function(language){
var langArr = language.split(',').map(function(el){
return el.split(';')[0].split(/-|_/)[0];
});
$translate.fallbackLanguage(langArr)
$translate.preferredLanguage(langArr[0]);
$translate.use(langArr[0]);
});
});
and in app config:
app.config(function ($routeProvider, $translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: '/languages/',
suffix: '.json'
});
});
section because I can't make http call in config and it fails... :/ langauges are loaded but the translation isn't changed... What am I doing wrong? Here is plunker:
http://plnkr.co/edit/41SngK2tCTeaq8IhMbcM
it doesn't display anything no translations... why? :( I would be very pleased with any help.
As for your question the view doesn't show anything due to the following errors:
Few mistakes:
First of all, ng-app should be moved to the html tag.
<html ng-app="translateApp">
Second, if you use a variable from a controller you should use ng-controller.
<div ng-controller="mainCtrl">
Last, when you bind a variable from the view to the controller the variable should be on the $scope.
$scope.translation = $translate.instant('GENERAL');
Fixed your plunker with my comments: Plunker.
As for the way $translate works, I am not really familiar with this service but I will try and have a look.
EDIT:
I studied $translate service in order to give you a full answer including fixing the way you used Translate, So first of all I put a timeout of 2 seconds before trying to use translate.instant, the reason is that I am letting translate loading the JSON files in the config.
I have added 2 buttons so you could switch between the languages and see it is working.
Enjoy! Here is the updated working Plunker.
Here is translate documentation site I used.
What modules / tips can be used to handle loading in AngularJS? Basically, how do you include a loading icon when a page is being loaded (for instance account settings of the user OR when the page is initially loaded)? Is there a standard procedure or ng- module?
Ps. If my question is too vague or inappropriate, please correct me. I do think that it has crossed the minds of most Angular beginners.
This is by far the easiest method of indicating one or multiple XHR requests in progress, if you're using a flavour of ui-routing, it'l also show you the HTML files being fetched in XHR requests.
http://chieffancypants.github.io/angular-loading-bar/
It's a bar that looks the same like the Youtube loading indicator, and it's easily style-able.
Just include the library as an ng-module, that's it.
angular.module('myApp', ['angular-loading-bar'])
You might want to disable either the circle or the bar itself(both at the same time might look a bit too much).
I found this answer to be very helpful, courtesy of Josh David Miller:
.controller('MainCtrl', function ( $scope, myService ) {
$scope.loading = true;
myService.get().then( function ( response ) {
$scope.items = response.data;
}, function ( response ) {
// TODO: handle the error somehow
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
});
});
<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>
Source:
https://stackoverflow.com/a/15033322/4040107
had answered similar question earlier as well.... If you dont want to implement it yourself, below are few links.
angular-spinner or angular-sham-spinner
also read this BLOG which details how the spinner works with angularjs
if you want to implement it yourself... then
app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});
i havent tested the code but directive wont be more complex than this...
I have the following code in an Angular app:
'use strict';
angular.module('fooApp')
.controller('FooCtrl', function ($scope) {
});
When I run JSHint (with indent set to 4) on this code, I get the following error:
[L6:C5] W015: Expected '}' to have an indentation at 1 instead at 5.
});
How do I get JSHint to allow me to keep my chaining indentation?
Update
I found that if I add a body to the FooCtrl function like this:
'use strict';
angular.module('fooApp')
.controller('FooCtrl', function ($scope) {
$scope.foo = {};
});
Then it does pass JSHint. Anyone know why?
I don't believe there is a way to do it. The whitespace checking in JSHint is fairly static, you get on or off, no configuration. There's an open bounty to add some configuration, but nothing seems to be in the works (at least for your situation).
https://github.com/jshint/jshint/issues/28
You'll either have to just ignore it or turn off the whitespace check.
simply said: you don't. Either you remove all indentation checking from your config file, or you match the crockford's recommandation. There's an open bug about giving more flexible rules, but it has to be implemented.
Having submitted code to JSHint, it would not be hard to implement a more flexible way to check whitespaces. Except that there are a lot of cases where it has to be checked... The main problem is to find an intelligent way to fine tune your indentation preferences.