Як виконати функцію контролера AngularJS при завантаженні сторінки?

На даний момент у мене є сторінка Angular.js, яка дозволяє шукати та відображати результати. Користувач натискає на результат пошуку, потім натискає кнопку назад. Я хочу, щоб результати пошуку відображалися знову, але я не можу розробити, як запустити пошук для виконання. Ось деталь:

• Моя сторінка Angular.js - це сторінка пошуку з полем пошуку та кнопкою пошуку. Користувач може ввести запит вручну і натиснути кнопку, і запит ajax запускається, і результати відображаються. Я оновлюю URL-адресу за допомогою пошукового терміну. Це все добре працює.
• Користувач натискає на результат пошуку і переходить на іншу сторінку - це теж добре.
• Користувач натискає кнопку назад, повертається на мою кутову сторінку пошуку, і відображається правильна URL-адреса, включаючи пошуковий термін. Все працює чудово.
• Я прив’язав значення пошукового поля до пошукового терміна в URL-адресі, тому він містить очікуваний пошуковий термін. Все працює чудово.

Як змусити функцію пошуку знову виконати, не потребуючи натискання «кнопки пошуку» користувачеві? Якщо б це було jquery, то я би виконував функцію у функції, яка вже документує. Я не можу побачити еквівалент Angular.js.

З одного боку, як @ 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();

Також ви можете поглянути на директиву ng-init . Впровадження буде приблизно таким:

// 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
};

Але подбайте про це, оскільки кутова документація передбачає (оскільки v1.2) НЕ використовувати ng-initдля цього. Однак, це залежить від архітектури вашої програми.

Я використовував, ng-initколи хотів передати значення з "бек-енду" в кутовий додаток:

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

Спробуйте це?

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

Я ніколи не міг $viewContentLoadedби працювати на мене, і його ng-initслід використовувати лише в ng-repeat(відповідно до документації), а також виклик функції безпосередньо в контролері може призвести до помилок, якщо код покладається на елемент, який ще не був визначений .

Це те, що я роблю, і це працює для мене:

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

Якщо ви не використовуєте ui-router. Тоді це:

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

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

    // your code here

});

Рішення Димитрія / Марка не працювало для мене, але використання функції $ timeout, здається, працює добре, щоб забезпечити, що ваш код працює лише після надання розмітки.

# Your controller, including $timeout

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

$timeout($scope.init)

Сподіваюся, це допомагає.

Це можна зробити, якщо ви хочете переглянути об'єкт DOM viewContentLoaded, щоб змінитися, а потім зробити щось. використання $ range. $ для роботи теж працює, але по-різному, особливо коли у вас є режим однієї сторінки.

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

Ви можете використовувати $ window object:

$window.onload = function(e) {
  //your magic here
}

Ще одна альтернатива:

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

(через https://stackoverflow.com/a/30258904/148412 )

Ще одна альтернатива, якщо у вас є контролер, специфічний саме для цієї сторінки:

(function(){
    //code to run
}());

Використовуючи $ routeProvider, ви можете вирішити на .state і завантажувати свою послугу. Це означає, що ви збираєтеся завантажити Controller і View, тільки після вирішення послуги:

ui-маршрути

 .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;
          }
        }
      })

Сервіс

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

Знайдений відповідь Дмитра Євсєєва досить корисний.

Випадок 1: Використання лише angularJs:
Щоб виконати метод на завантаженні сторінки, ви можете використовувати ng-initу поданні та оголошувати метод init у контролері, сказавши, що використання більш важкої функції не рекомендується, відповідно до кутових Документів у ng-init :

Цю директиву можна зловживати, щоб додати зайві кількості логіки у ваші шаблони. Існує лише кілька відповідних застосувань ngInit, наприклад, для псевдонімування спеціальних властивостей ngRepeat, як видно з демонстрації нижче; і для введення даних за допомогою сценарію на стороні сервера. Окрім цих кількох випадків, вам слід використовувати контролери, а не ngInit для ініціалізації значень на області.

HTML:

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

Контролер:

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

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

    doSearch($routeParams.searchKeyword);
})

Попередження: Не використовуйте цей контролер для іншого виду, призначеного для іншого наміру, оскільки це призведе до того, що спосіб пошуку буде виконаний і там.

Випадок 2: Використання Ionic:
Наведений вище код буде працювати, просто переконайтеся, що кеш перегляду вимкнено у route.jsвигляді:

route.js

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

Сподіваюсь, це допомагає

У мене була така ж проблема, і для мене працювало тільки це рішення (воно виконує функцію після завантаження повної DOM). Я використовую це для прокрутки до прив'язки після завантаження сторінки:

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

                        // Your function that runs after all DOM is loaded

                    });

Ви можете зберегти результати пошуку в загальній службі, яку можна використовувати з будь-якого місця та не очищати при переході на іншу сторінку, а потім ви можете встановити результати пошуку із збереженими даними для натискання кнопки "Назад".

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

Для вашої задньої кнопки

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

виклик початкових методів всередині функції самоініціалізації.

(function initController() {

    // do your initialize here

})();