如何在页面加载时执行AngularJS控制器功能？

本文翻译自：How to execute AngularJS controller function on page load?

Currently I have an Angular.js page that allows searching and displays results. 目前我有一个Angular.js页面，允许搜索和显示结果。 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. 我的Angular.js页面是一个搜索页面，带有搜索字段和搜索按钮。 The user can manually type in a query and press a button and and ajax query is fired and the results are displayed. 用户可以手动键入查询并按下按钮，并触发ajax查询并显示结果。 I update the URL with the search term. 我用搜索词更新了URL。 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. 用户单击后退按钮，然后返回到我的角度搜索页面，并显示正确的URL，包括搜索词。 All works fine. 一切正常。
• I have bound the search field value to the search term in the URL, so it contains the expected search term. 我已将搜索字段值绑定到URL中的搜索词，因此它包含预期的搜索词。 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. 如果它是jquery，那么我将在documentready函数中执行一个函数。 I can't see the Angular.js equivalent. 我看不到Angular.js的等价物。

---

#1楼

参考：https://stackoom.com/question/12rUP/如何在页面加载时执行AngularJS控制器功能

---

#2楼

Try this? 试试这个？

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

---

#3楼

On the one hand as @Mark-Rajcok said you can just get away with private inner function: 一方面，正如@ Mark-Rajcok所说，你可以逃脱私人内在功能：

// 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. 您还可以查看ng-init指令。 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. 但要注意它，因为角度文档暗示（从v1.2开始）不使用ng-init 。 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: 当我想将值从后端传递到角度应用程序时，我使用了ng-init ：

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

---

#4楼

You can do this if you want to watch the viewContentLoaded DOM object to change and then do something. 如果要观察要更改的viewContentLoaded DOM对象然后执行某些操作，则可以执行此操作。 using $scope.$on works too but differently especially when you have one page mode on your routing. 使用$ scope。$ on也可以，但不同，特别是当你的路由有一个页面模式时。

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

---

#5楼

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. 我永远不会让$viewContentLoaded为我工作，并且ng-init应该只用于ng-repeat （根据文档），并且如果代码依赖于一个控制器，直接在控制器中调用函数会导致错误尚未定义的元素。

This is what I do and it works for me: 这就是我的工作，它对我有用：

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

Unless you're using ui-router . 除非你使用ui-router 。 Then it's: 那就是：

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

---

#6楼

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. Dimitri的/ Mark的解决方案对我不起作用，但是使用$ timeout函数似乎可以很好地确保代码仅在呈现标记后运行。

# Your controller, including $timeout

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

$timeout($scope.init)

Hope it helps. 希望能帮助到你。