В настоящее время у меня есть страница Angular.js, которая позволяет осуществлять поиск и отображать результаты. Пользователь нажимает на результат поиска, затем нажимает кнопку "Назад". Я хочу, чтобы результаты поиска отображались снова, но не могу понять, как запустить поиск на выполнение. Вот деталь:
Как сделать так, чтобы функция поиска выполнялась снова без необходимости нажатия пользователем кнопки "Поиск"? Если бы это был jquery, то я бы выполнил функцию в функции documentready. Я не вижу эквивалента в 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
};
Но будьте осторожны, поскольку документация angular подразумевает (начиная с версии 1.2) НЕ использовать ng-init
для этого. Впрочем, это зависит от архитектуры вашего приложения.
Я использовал ng-init
, когда хотел передать значение из back-end в приложение angular:
<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
Попробуйте это?
$scope.$on('$viewContentLoaded', function() {
//call it here
});
Я никогда не мог получить $viewContentLoaded
работать на меня, и НГ-инит должны действительно быть использованы только в `НГ-повторите (согласно документации), а также вызов функции напрямую в контроллер может привести к ошибкам, если код полагается на элемент, который еще'т быть определена.
Это то, что я делаю и это работает для меня:
$scope.$on('$routeChangeSuccess', function () {
// do something
});
Если вы're через пользовательский интерфейс-маршрутизатор
. Потом он'ы:
$scope.$on('$stateChangeSuccess', function () {
// do something
});
angular.element(document).ready(function () {
// your code here
});
Дмитрий'ы/Марк'ы решение не't работа для меня, но с помощью $тайм-аут функция, кажется, работает хорошо, чтобы обеспечить ваш код выполняется только после выполнения разметки просмотру.
# Your controller, including $timeout
var $scope.init = function(){
//your code
}
$timeout($scope.init)
Надеюсь, что это помогает.
Это можно сделать, если вы хотите следить за изменением DOM-объекта viewContentLoaded и затем что-то делать. Использование $scope.$on тоже работает, но по-другому, особенно когда у вас есть режим одной страницы в маршрутизации.
$scope.$watch('$viewContentLoaded', function(){
// do something
});
Вы можете использовать угловой'ы $window объект:
$window.onload = function(e) {
//your magic here
}
Другая альтернатива:
var myInit = function () {
//...
};
angular.element(document).ready(myInit);
При использовании $routeProvider вы можете решить на .государство и Bootstrap вашим услугам. Это значит, что вы собираетесь загрузить контроллер и посмотреть, только после решения сервиса:
пользовательский интерфейс-маршруты
.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 в покое: <БР>чтобы выполнить метод на странице загрузки, вы можете использовать НГ-init и на вид и объявить init метод в контроллер, сказав, что использование более тяжелых функцию не рекомендуется, так как в соответствии с угловой Docs на НГ-инит:
эта директива может использоваться, чтобы добавить лишнее количество логики в шаблоны. Есть только несколько подходящих вариантов использования 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` как:
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
});
Вы можете сохранить результаты поиска в общем сервис, который можно использовать в любом месте и doesn'т понять, когда переходить на другую страницу, а затем вы можете установить результатах поиска с сохраненными данными по нажатию кнопки Назад
function search(searchTerm) {
// retrieve the data here;
RetrievedData = CallService();
CommonFunctionalityService.saveSerachResults(RetrievedData);
}
Для вашего назадВ
function Backbutton() {
RetrievedData = CommonFunctionalityService.retrieveResults();
}
назовем исходное методов внутри функции самостоятельной инициализации.
(function initController() {
// do your initialize here
})();