无法调用$stateProvider两次来更新视图(它只在第一次工作)

unable to call $stateProvider, twice to update the view (it is only working for the first time)

本文关键字:新视图 更新 工作 第一次 两次 stateProvider 调用      更新时间:2023-09-26

我有一个图书搜索页面,当我单击搜索选项卡时,根据搜索条件,它将在相邻的块中显示结果。但是当我第二次点击它时,它不工作!

页面的相关html代码:

<form action="#" method="post" ng-controller = "OptionsController as oCtrl">
         <select class="selectpicker btn btn-default" name="SearchCriteria" id ="sOptions">
                <option value="1">Title</option>
                <option value="2">Author</option>
         </select>
         <label class="searchbox">
         <span><br></span>
               <textarea id="searchBox" name="searchBox" value="" type="text" autocomplete="on" placeholder="search books"></textarea>
         </label>
         <input type="button" value="Search" id = "bsearch" class="submit button" ui-sref = ".searchResults">                       
        </form>
<div id = "spaceforresults" ui-view = "" autoscroll="false"> </div>

我的angular js路由代码

routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('books.searchResults', {
    url: '',
    templateUrl: 'html/searchResults.html',
    controller: 'BookController',
});

因此,当我点击搜索按钮时,结果如预期的那样弹出。然后,如果我更改选项并再次单击搜索按钮,则不会路由视图(更新结果)。我做错什么了吗?

重新加载

设置你的状态为true

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

摘自此处,请给予原作者支持

我找到答案了!通过使用$state。在不同的状态下,我们可以显式地要求路由器根据触发的事件重新加载内容。

然后我的angularjs代码被修改为
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('books.searchResults', {
url: '',
templateUrl: 'html/searchResults.html',
controller: 'BookController',
})
$stateProvider
.state('books.reloader', {
controller: function($state) {
      $state.go('^.searchResults');
    }
});

的形式
<input type="button" value="Search" id = "bsearch" class="submit button" ui-sref = ".reloader">

这个答案选自这个帖子