目前我有一个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文档暗示(从v1.2版开始)不要使用ng-init
来实现。然而,我认为这取决于你的应用程序的架构。
当我想把一个值从后端传到angular应用程序时,我使用了ng-init
。
<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
我总是不能让$viewContentLoaded
为我工作,ng-init
真的应该只在ng-repeat
中使用(根据文档),如果代码依赖于一个还没有定义的元素,那么直接在控制器中调用一个函数也会导致错误。
我是这样做的,而且很有效。
$scope.$on('$routeChangeSuccess', function () {
// do something
});
除非你使用ui-router
。
那么它'的。
$scope.$on('$stateChangeSuccess', function () {
// do something
});
另一种选择。
var myInit = function () {
//...
};
angular.element(document).ready(myInit);
当使用$routeProvider时,你可以在.state上解析并引导你的服务。 这就是说,你要加载Controller和View,只有在解析了你的服务之后才能加载。
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 on ng-init][1],不建议使用更重的函数。
这个指令可以被滥用,在你的模板中添加不必要的逻辑量。 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'
})
希望能帮到你
您可以将搜索结果保存在一个共同的服务中,可以在任何地方使用,并且当导航到另一个页面时不清除,然后您可以设置搜索结果与保存的数据,以便点击返回按钮。
function search(searchTerm) {
// retrieve the data here;
RetrievedData = CallService();
CommonFunctionalityService.saveSerachResults(RetrievedData);
}
用于您的后键
function Backbutton() {
RetrievedData = CommonFunctionalityService.retrieveResults();
}