如何在頁面加載時執行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. 希望能幫助到你。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章