本文翻譯自: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. 希望能幫助到你。