How to execute AngularJS controller function on page load?
I could never get $viewContentLoaded
to work for me, and ng-init
should really only be used in an ng-repeat
(according to the documentation), and also calling a function directly in a controller can cause errors if the code relies on an element that hasn't been defined yet.
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
});
Try this?
$scope.$on('$viewContentLoaded', function() {
//call it here
});
On the one hand as @Mark-Rajcok said you can just get away with private inner function:
// at the bottom of your controller
var init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};
// and fire it after definition
init();
Also you can take a look at ng-init directive. Implementation will be much like:
// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>
// in controller
$scope.init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};
But take care about it as angular documentation implies (since v1.2) to NOT use ng-init
for that. However imo it depends on architecture of your app.
I used ng-init
when I wanted to pass a value from back-end into angular app:
<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>