Right now I am using angular.element(document).ready(init()); but it calls init(); on every page refresh and not when browsing back and forth to the page. How could I call this function on every page view ?
I've tried also onload and ng-init and they don't work - the function doesn't get called.
I think this is what you're looking for:
$routeChangeSuccess Broadcasted after a route change has happened successfully. The resolve dependencies are now available in the
current.locals property.
ngView listens for the directive to instantiate the controller and
render the view.
This is what I do and it works for me:
$scope.$on('$routeChangeSuccess', function () {
// do something
});
Unless you're using ui-router. Then it's:
$scope.$on('$stateChangeSuccess', function () {
// do something
});
More info is found in the docs
Related
$scope.$on('$destroy', function (event){
$timeout.cancel(promiseObj);
});
If i am on a page that is being loaded(since the page contain $http request, it takes time to load data) and while loading, I change the page from navigation, the $timeout is not being deleted, and continuous http call are going. can you help?
Use $routeChangeStart instead of $destroy
$routeChangeStart
Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.
The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.
So please try this below code.
$scope.$on('$routeChangeStart', function (scope, next, current) {
if (next.$$route.controller != "Your Controller Name") {
$timeout.cancel(promiseObj);// clear interval here
}
});
Actually, problem was angular created many objects with same name as promiseObj.
So, those object were not being deleted. So, I created an array of promiseObj[], and using for loop i deleted all the promises. ;)
$scope.$on('$destroy', function () {
for(var promise in promiseObj)
{
$timeout.cancel(promiseObj[promise]);
}
});
When switching Views in AngularJS (from #1 to #2), I am sending two XHR requests to the server. One of them is finished quicker and as soon as it is, the template gets rendered. However, in the template I'm referring to data that comes back from the second request, which at that time is not finished yet.
Is there a way that I can wait for all requests to finish before rendering the template?
Currently I'm simply defining methods in the controller and then at its bottom, executing the XHR requests and assigning the response to $scope variables.
If you're using the $compile directive to render your HTML-Templates dynamically, you could add
ng-show="showCtrl"
And in your controller preset
$scope.showCtrl = false;
If you have the standard route provider, wrap your HTML-Template with a DIV e.g.
<div style="display:none" or ng-show="showCtrl">
If your XHR Request is finished, just take the DIV-Element with attribute and say
display:block or
showCtrl = true; $scope.$apply();
Greetings
You should be using the promise service
Please refer to
https://docs.angularjs.org/api/ng/service/$q
I'd say the best way to handler this is to use a resolve on your router.
If you are using the default Angular router, see the docs here: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider, specifically the resolve property of the route definition. It allows you to specify any async calls that will be completed before the route changes and the next view is loaded.
If you use angular-ui-router, there is the exact same concept there.
Here is an example of using resolve from the angular docs:
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
});
Obviously they have a fake async call here with a timeout, but as long as your XHR call returns a promise (which will be the case if you use the $http service), then your controller can just be injected with delay in this case, and use the resolved data straight away.
I have a run function for a module and inside it there is a $routeChangeStart event binding. I would like to know time of the first routeChangeStart event triggered. I am expecting that it should be called immediately after first request but before any page render but it is not as I expected. It seems that the event is called after page started to be rendered.
module.run(function ($location, $rootScope) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
//do something with next.xxx
});
})
What is the expected behaviour? Or this is a bug?
The event is fired before the page starts rendering, but that doesn't mean you'll catch it before the rendering begins. The event gets fired, then the next thing in the call stack is when Angular begins the page rendering (fetching the template, waiting for the route resolve property, etc) and you catch the event after that. From the angular docs...
Broadcasted before a route change. At this point the route services
starts resolving all of the dependencies needed for the route change
to occur. Typically this involves fetching the view template as well
as any dependencies defined in resolve route property. Once all of the
dependencies are resolved $routeChangeSuccess is fired.
If you need to do something like conditionally preventing the change, try using the $locationChangeStart event instead. For example...
$scope.$on('$locationChangeStart', function (event) {
if (someCondition) {
event.preventDefault(); // prevent the change
}
});
This will be run before Angular starts loading the new page.
I've seen this and this but it seems like there might be a simpler way.
In my view I have several menu options that are controlled through permissioning - i.e., not everyone can see a "Dashboard" view. So in my menu option in my view I have something like the following:
<li ng-show="validatePermission('Dashboard')">Dashboard</li>
In my controller I have a validatePermission method defined where it is looking at the permissions of the current user. For example:
$scope.validatePermission = function(objectName) {
if $scope.allPermissions......
Also in my controller I'm loading those permissions via an $http call:
$http.get('permissions/' + userid + '.json').success(function(data) {
$scope.allPermissions = data;....
The issue is that $scope.allPermissions doesn't get loaded before the view makes the call to validatePermission. How can I wait for allPermissions to be loaded before the view renders?
You ask:
How can I wait for allPermissions to be loaded before the view renders?
To prevent the entire view from rendering, you must use resolve. You don't have to use the promise library though, since $http returns a promise:
var app = angular.module('app');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'template.html',
controller : 'MyCtrl',
resolve : MyCtrl.resolve
});
});
function MyCtrl ($scope, myHttpResponse) {
// controller logic
}
MyCtrl.resolve = {
myHttpResponse : function($http) {
return $http({
method: 'GET',
url: 'http://example.com'
})
.success(function(data, status) {
// Probably no need to do anything here.
})
.error(function(data, status){
// Maybe add an error message to a service here.
// In this case your $http promise was rejected automatically and the view won't render.
});
}
}
But if you simply want to hide the dashboard <li>, then do as Joe Gauterin suggested. Here's a very simple example plunkr if you need it.
Have the validatedPermission function return false when allPermissions hasn't been loaded. That way the element with your ng-show won't be displayed until allPermissions has been loaded.
Alternatively, put an ng-show="allPermissions" on the enclosing <ul> or <ol>.
You can also specify on your routecontroller a resolve object that will wait for that object to resolve prior to rendering that route.
From the angular docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired. The map object is:
key – {string}: a name of a dependency to be injected into the controller.
factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller.
A google group reference as well: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw
I encountered an similar situation, you might also want to take a quick look at
http://docs.angularjs.org/api/ng/directive/ngCloak
if you're still seeing a "flicker" effect.
As per the angularjs documentation:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
Wrapping the code in ng-if fixed the issue for me:
<div ng-if="dependentObject">
<!-- code for dependentObject goes here -->
</div>
I'm using the following to do paging in my datagrid:
$location.search('page', page);
where page is the current page number.
Then I listen to the following event:
$scope.$on('$routeUpdate', function(next, current) {
$scope.currentPage = $routeParams.page ? Number($routeParams.page) : 1;
$scope.search();
});
That triggers a call to a search() method on my scope after updating the currentPage that is in the URL.
How would I translate that to states with ui-router ? The $routeUpdate is no longer triggered since I'm using a state manager instead of routes.
My route is now defined in the state provider as such:
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
})
I ended up listening to the $locationChangeSuccess event instead and that solved it.
I would try to use the controller (mandatsCtrl in your example) to put that logic. the view controller will be called with every parameter change, and you could inject the $stateParams into it to get the page #
other similar option to explore is the view controllers which is what I've used at some point
last, since $stateParams is injectable, you might want to inject it to your custom-built directive and use it there straight