Как выполнить функцию контроллера AngularJS при загрузке страницы?

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

  • Мой Угловой.js page-это страница поиска, с полем поиска и поиском кнопка. Пользователь может вручную ввести запрос и нажать кнопку и ajax-запрос запускается, и результаты отображаются. Я обновите URL-адрес с помощью поискового запроса. Это все прекрасно работает.
  • пользователь нажимает на результат поиска и переходит на другую страницу - это тоже нормально.
  • пользователь нажимает кнопку назад и возвращается на мою страницу углового поиска, и отображается правильный URL-адрес, включая поисковый запрос. Все работает нормально.
  • я привязал значение поля поиска к поисковому запросу в URL-адресе, поэтому он содержит ожидаемый поисковый запрос. Все работает нормально.

Как могу ли я снова запустить функцию поиска без необходимости нажатия пользователем кнопки "Поиск"? Если бы это был jquery, то я бы выполнил функцию в функции documentready. Я не вижу угловатости.Яш эквивалент.

13 337
angularjs onload

13 ответов:

С одной стороны, как сказал @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

408

попробовать?

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

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

это то, что я делаю, и это работает для меня:

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

если вы используете ui-router. Тогда это:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});
59
angular.element(document).ready(function () {

    // your code here

});
41

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

# Your controller, including $timeout

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

$timeout($scope.init)

надеюсь, что это помогает.

29

вы можете сделать это, если хотите посмотреть объект viewContentLoaded DOM для изменения, а затем что-то сделать. используя $scope.$on тоже работает, но по-другому, особенно когда у вас есть режим одной страницы на вашем маршруте. 

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

вы можете использовать объект $window от angular:

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

другой вариант:

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

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

4

еще одна альтернатива, если у вас есть контроллер только для этой страницы:

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

при использовании $routeProvider вы можете разрешить on .состояние и bootstrap вашего сервиса. Это означает, что вы собираетесь загрузить контроллер и посмотреть, только после разрешения вашего сервиса:

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

сервис

function ourBootstrapService() {

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

нашел ответ Дмитрия Евсеева весьма полезным.

Случай 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: Использование Ионного:
приведенный выше код будет работать, просто убедитесь, что кэш просмотр отключен в route.js как:

маршрут.js

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

надеюсь, что это помогает

3

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

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

                        // Your function that runs after all DOM is loaded

                    });
3

вы можете сохранить результаты поиска в общей службе, которая может использовать из любого места и не ясно, когда перейдите на другую страницу, а затем вы можете установить результаты поиска с сохраненными данными для нажатия кнопки Назад

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

для вашей задней кнопки

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