Как выполнить функцию контроллера AngularJS при загрузке страницы?
В настоящее время у меня угловой.JS страница, которая позволяет искать и отображает результаты. Пользователь нажимает на результат поиска, затем нажимает кнопку Назад. Я хочу, чтобы результаты поиска отображались снова, но я не могу понять, как запустить поиск для выполнения. Вот деталь:
- Мой Угловой.JS page-это страница поиска с полем поиска и поиском кнопка. Пользователь может вручную ввести запрос и нажать кнопку и запрос ajax запускается, и результаты отображаются. Я обновите URL-адрес с помощью поискового запроса. Все это прекрасно работает.
- пользователь нажимает на результат поиска и переходит на другую страницу - это тоже нормально.
- пользователь нажимает кнопку назад и возвращается на мою страницу углового поиска, и отображается правильный URL, включая поисковый запрос. Все работает нормально.
- я привязал значение поля поиска к поисковому термину в URL-адресе, поэтому он содержит ожидаемый поисковый термин. Все работает нормально.
Как могу ли я снова запустить функцию поиска без нажатия пользователем кнопки "Поиск"? Если бы это был jquery, я бы выполнил функцию в функции documentready. Я не вижу углов.Яш эквивалент.
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
Я никогда не мог получить $viewContentLoaded
работать на меня, и ng-init
действительно следует использовать только в ng-repeat
(согласно документации), а также вызов функции непосредственно в контроллере может вызвать ошибки, если код полагается на элемент, который еще не определен.
это то, что я делаю, и это работает для меня:
$scope.$on('$routeChangeSuccess', function () {
// do something
});
если вы используете ui-router
. Тогда это:
$scope.$on('$stateChangeSuccess', function () {
// do something
});
Решение Дмитрия / марка не сработало для меня, но с помощью $тайм-аут функция работает хорошо, чтобы гарантировать, что ваш код запускается только после отображения разметки.
# Your controller, including $timeout
var $scope.init = function(){
//your code
}
$timeout($scope.init)
надеюсь, что это помогает.
вы можете сделать это, если хотите посмотреть объект viewContentLoaded DOM для изменения, а затем что-то сделать. используя $объем.$on работает тоже, но по-другому, особенно когда у вас есть один режим страницы на вашем маршруте.
$scope.$watch('$viewContentLoaded', function(){
// do something
});
еще одна альтернатива, если у вас есть контроллер, специфичный для этой страницы:
(function(){
//code to run
}());
при использовании $routeProvider вы можете разрешить .состояние и 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
}
}
нашел ответ Дмитрия Евсеева весьма полезным.
Случай 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
as:
маршрут.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();
}