我的主页只有一个搜索框。
<div class="input-group" ng-controller="MainSearchCtrl">
<input type="text" class="form-control" ng-model="term">
<span class="input-group-btn">
<button class="btn btn-danger" type="button" ng-click="search();">Search</button>
</span>
</div>
我的主搜索控制器看起来像这样。
app.controller('MainSearchCtrl', ['$scope', '$log', '$state', function($scope, $log, $state) {
$scope.search = function() {
$log.debug("searching for", $scope.term);
$state.go('index.search', {q: $scope.term});
}
}]);
我正在为我的州使用u-router。
$stateProvider.state('index', {
abstract: true,
templateUrl: "app/views/common/content.html"
}).state('index.main', {
url: "/",
templateUrl: "app/views/main.html"
}).state('index.search', {
url: "/search?:q",
templateUrl: "app/views/search.html"
});
我的content.html中有一个<ui-view/>
,主页面渲染得很好但是当我想提交搜索时,我的浏览器位置根本不会改变。
而不是http://localhost:7000/#/search?q=param
我总是http://localhost:7000/#/?q=param
。这会导致我的main.html
模板也加载,这不是我想要的。
我做错了什么?
答案 0 :(得分:0)
我认为使用查询参数在ui router
中指定路由的正确方法如下:
$stateProvider.state('index', {
abstract: true,
templateUrl: "app/views/common/content.html"
}).state('index.main', {
url: "/",
templateUrl: "app/views/main.html"
}).state('index.search', {
url: "/search?q",
templateUrl: "app/views/search.html"
});
注意缺少的&#39;:&#39;在第二条路线中q
之前。希望这会有所帮助。