目前我有一个Angular.js页面,允许搜索和显示结果。用户单击搜索结果,然后单击返回按钮。我想再次显示搜索结果,但我不知道如何触发搜索执行。细节如下:
My Angular.js page is a search page, with a search field and a search
button. The user can manually type in a query and press a button and
and ajax query is fired and the results are displayed. I update the URL with the search term. That all works fine.
User clicks on a result of the search and is taken to a different page - that works fine too.
User clicks back button, and goes back to my angular search page, and the correct URL is displayed, including the search term. All works fine.
I have bound the search field value to the search term in the URL, so it contains the expected search term. All works fine.
我如何让搜索功能再次执行,而不需要用户按下“搜索按钮”?如果是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文档暗示(从v1.2开始)不要使用ng-init。然而,在我看来,这取决于你的应用程序的架构。
当我想从后端传递一个值到angular app时,我使用了ng-init:
<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
当使用$routeProvider时,你可以解析.state并引导你的服务。也就是说,你要加载控制器和视图,只有在解析你的服务之后:
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
}
}
发现Dmitry Evseev的回答很有用。
案例1:单独使用angularJs:
要在页面加载中执行一个方法,你可以在视图中使用ng-init,并在控制器中声明init方法,虽然不建议使用更重的函数,但根据angular Docs中关于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'
})
希望这能有所帮助