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

Ответ 1

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

Но будьте осторожны, поскольку angular документация подразумевает (начиная с версии 2.1), чтобы НЕ использовать ng-init для этого. Однако это зависит от архитектуры вашего приложения.

Я использовал ng-init, когда я хотел передать значение из back-end в angular приложение:

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

Ответ 2

Попробуйте это?

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

Ответ 3

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

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

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

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

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

Ответ 4

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

    // your code here

});

Ответ 5

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

# Your controller, including $timeout

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

$timeout($scope.init)

Надеюсь, что это поможет.

Ответ 6

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

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

Ответ 7

Вы можете использовать angular $window object:

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

Ответ 8

Другая альтернатива:

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

(через fooobar.com/questions/19762/...)

Ответ 9

При использовании $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
 }
}

Ответ 10

Найден Дмитрий Евсеев ответил весьма полезный.

Случай 1: Использование только угловых:
Чтобы выполнить метод загрузки страницы, вы можете использовать ng-init в представлении и объявить метод init в контроллере, указав, что использование более тяжелой функции не рекомендуется, в соответствии с angular Документы в 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'
  })

Надеюсь, что это поможет

Ответ 11

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

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

                        // Your function that runs after all DOM is loaded

                    });

Ответ 12

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

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

Ответ 13

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

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

For your backbutton

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