Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

Currently I have an Angular.js page that allows searching and displays results. User clicks on a search result, then clicks back button. I want the search results to be displayed again but I can't work out how to trigger the search to execute. Here's the detail:

  • My Angular.js page is a search page, with a search field and a search button. The user can manually type in a query and press a button and and ajax query is fired and the results are displayed. I update the URL with the search term. That all works fine.
  • User clicks on a result of the search and is taken to a different page - that works fine too.
  • User clicks back button, and goes back to my angular search page, and the correct URL is displayed, including the search term. All works fine.
  • I have bound the search field value to the search term in the URL, so it contains the expected search term. All works fine.

How do I get the search function to execute again without the user having to press the "search button"? If it was jquery then I would execute a function in the documentready function. I can't see the Angular.js equivalent.

share|improve this question
    
are you using $routepProvider? Use it to connect to service in your app that provides data for the search results. Don't think in document.ready terms as with jQuery. Hard to help a lot without seing how you have search wired up currently – charlietfl Mar 17 '13 at 11:47

12 Answers 12

up vote 334 down vote accepted

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>
share|improve this answer
6  
@Duke, can't you just put the contents of the init() function at the bottom of your controller? I.e., why do you need to use ng-init and have an init() function? When the user hits the back button, I assume you are switching views, hence a new myCtrl controller is created and executes. – Mark Rajcok Mar 18 '13 at 15:41
22  
While this solution works, I downvoted because the ng-init documentation advises against this. Specifically, "The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope." – Jason Capriotti Dec 4 '13 at 20:59
1  
Controller is instantiated after html is on its place. – Dmitry Evseev Jan 28 '14 at 23:01
3  
What if the controller is reused in other pages but you just want to fire it on a specific page? – Roberto Linares Jun 2 '14 at 2:10
2  
@RobertoLinares I personally find directives to be a better place for reusable functionality. You can have a directive with an init parameter: <div smth on-init="doWhatever()">. Of course it depends on a certain usage case. – Dmitry Evseev Jun 2 '14 at 15:20

Try this?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});
share|improve this answer
4  
Thanks for the reply but Dmitry's answer was an exact match to what I'm looking for. Further research seemed to recommend against $viewContentLoaded – Duke Dougal Mar 18 '13 at 3:16
6  
The use cases are just different. I use Mark's method all the time as well. – finishingmove Jun 20 '13 at 23:21
    
For my use case this was a perfect solution. We needed to autoselect the text to encourage user to copy it. The page could be reloaded/revisited many times, so $viewContentLoaded was an exact match. Thanks! – Olga Gnatenko Jul 7 '15 at 14:26
    
Is it possible that this is executed several times? I am getting a behavior that seems to be mimicking that ... – MadPhysicist Jul 31 '16 at 2:14
1  
This one did not work for me but $scope.$watch worked. What is the main difference? – Burak Tokak Aug 23 '16 at 8:51

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
});
share|improve this answer
1  
You are awesome, my friend. – taco Apr 21 '15 at 16:14
    
Exactly what I needed. I was literally looking for this for two days! – hellojebus Apr 26 '16 at 5:22
    
$scope.$on('$routeChangeSuccess' fires every time parameters in url changed (via $location for example), and thus you can use just $scope.$on('$locationChangeSuccess'. If you need some trigger at page load/reload, you can use $scope.$watch('$viewContentLoaded' as was suggested here. It will not fire during url parameters changes. – TranslucentCloud Dec 14 '16 at 7:54
angular.element(document).ready(function () {

    // your code here

});
share|improve this answer
4  
Must be the accepted answer, this is the safer way to do it – Marwen Trabelsi Aug 14 '15 at 11:15
    
This is good if we don't work with $scope and instead work with this. – Akash May 18 '16 at 3:23
    
Where does this need to go? I have it in my template and it is not firing. – Dave Jun 30 '16 at 16:54
    
Wouldn't be best to inject $document in this case? angular.element($document).ready... – jamie Oct 27 '16 at 3:34

Dimitri's/Mark's solution didn't work for me but using the $timeout function seems to work well to ensure your code only runs after the markup is rendered.

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

Hope it helps.

share|improve this answer
3  
Finally. This is the only one that worked for me. Thanks. – zmirc Aug 20 '15 at 9:17
    
This works. Also don't forget to clear the timeout with $timeout.cancel(timer) where you have var timer = $timeout($scope.init, milliseconds); once your initialization is done. Also, I don't think $scope should have a 'var' def in your code above – nilerafter24 Nov 22 '16 at 4:26

You can do this if you want to watch the viewContentLoaded DOM object to change and then do something. using $scope.$on works too but differently especially when you have one page mode on your routing.

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });
share|improve this answer
5  
Specifically, if you use $rootScope.$watch instead of $rootScope.$on it won't fire on route changes, so you can use logic specific to the initial page load. – csahlman Mar 18 '14 at 12:30

You can use angular's $window object:

$window.onload = function(e) {
  //your magic here
}
share|improve this answer

Another alternative:

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

(via http://stackoverflow.com/a/30258904/148412)

share|improve this answer

When using $routeProvider you can resolve on .state and bootstrap your service. This is to say, you are going to load Controller and View, only after resolve your Service:

ui-routes

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

Service

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}
share|improve this answer

Found Dmitry Evseev answer quite useful.

Case 1 : Using angularJs alone:
To execute a method on page load, you can use ng-init in the view and declare init method in controller, having said that use of heavier function is not recommended, as per the angular Docs on ng-init:

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

HTML:

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

Controller:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

Warning : Do not use this controller for another view meant for a different intention as it will cause the search method be executed there too.

Case 2 : Using Ionic:
The above code will work, just make sure the view cache is disabled in the route.js as:

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

Hope this helps

share|improve this answer
1  
This only had one up and was at the very bottom, glad I went all the way down, the cache: false did it for me – thanks! – Rani Kheir Aug 17 '16 at 11:40

Yet another alternative if you have a controller just specific to that page:

(function(){
    //code to run
}());
share|improve this answer

I had the same problem and only this solution worked for me (it runs a function after a complete DOM has been loaded). I use this for scroll to anchor after page has been loaded:

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.