如何通过路由提供程序将范围值传递给控制器​​？

Question

我有一个搜索字段，当我点击搜索按钮时，我将使用搜索字段中输入的值搜索数据。这是我的代码。

HTML代码

<a href="#/home">Home</a>
<label class="item item-input">
    <input type="text"><a ng-href="#/search/{{searchVal}}" ng-model="searchVal">Search</a>
</label>

JS代码

angular.module('myApp', ['ngRoute'])
 .controller('searchController', function($scope, $http, $routeParams) {
    var name = $routeParams.name;
    alert(name)
});

angular.module('myApp')
  .config(function($routeProvider) {
    $routeProvider.
      when('/home', {
        templateUrl: 'home.html'
      }).
      when('/search/:name', {
        templateUrl: 'search.html',
        controller: 'searchController'
      }). 
      otherwise({
        redirectTo: '/home'
      });
});

这里我无法将搜索值传递给routeProvider。如何通过routeProvider传递搜索值并访问searchController中的搜索值。

我在控制器中使用了routeParams，但我无法检索搜索字段的值。

那么，如何在searchController中获取值？这是Plnkr

Answer 1

您应该在路由定义中定义搜索参数，以便routeParams识别该参数。

when('/search/:name', {
    templateUrl: 'search.html?query',
    controller: 'searchController'
})

您可以使用routeParams.query来检索控制器中的值。

Answer 2

您一直在将ng-model分配给<a>而不是input。

<a href="#/home">Home</a>
<label class="item item-input">
    <input type="text" ng-model="searchVal"><a ng-href="#/search/{{searchVal}}">Search</a>
</label>

Working Plunker：http://plnkr.co/edit/LWjHX5XzXINnkNBwGq42?p=preview

Answer 3

您的代码唯一的问题是将ng-model与锚标记相关联，而不是与输入标记相关联。因为我们将值输入到输入框并且与ng-model直接关联。

以下是必须做出的改变：

<a href="#/home">Home</a>
<label class="item item-input">
    <input type="text" ng-model="searchVal"><a ng-href="#/search/{{searchVal}}">Search</a>
</label>