AngularJS将表格提交给另一个州

时间:2015-10-24 08:22:08

标签: angularjs angular-ui-router

我的主页只有一个搜索框。

<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模板也加载,这不是我想要的。

我做错了什么?

1 个答案:

答案 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之前。希望这会有所帮助。