Question

Angular网站上的路由和多视图教程显示了一个部分页面包含以下代码段的示例：

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

这意味着，当点击URL时，将执行为其配置的路由，并且视图将被替换：

when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
}).

此处，URL中提供了参数。因此PhoneDetailCtrl from $routeParams可以使用它们。

但是，如果用户在SELECT, INPUT框中键入参数怎么办？ PhoneDetailCtrl如何掌握它们？

谢谢，佳日

Answer 1

更新回答：

我认为您只需要在搜索框和网址之间设置一些数据绑定吗？

JavaScript的：

angular.module('YourModule').config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/phones/:searchValue', {
        templateUrl: 'phoneSearch.html',
        controller: PhoneSearchCntl
    });
});

function PhoneSearchCntl($scope, $routeParams){
    // Get the previous searchValue from the URL or set an empty string.
    $scope.searchValue = $routeParams.searchValue || '';
}

HTML：

<div ng-controller="PhoneSearchCntl">
    <!-- text input is bound to `searchValue` on the controller. -->
    <input type="text" id="search" ng-model="searchValue"></input>

    <!-- The URL of the link is also bound to `searchValue` on the controller. -->
    <a ng-href="#/phones/{{searchValue}}">Search URL</a>
</div>

原始答案：

参数在$routeParams提供程序中可用。

查看Angular文档中的route example。

以下是如何使用它的快速摘要：

angular.module('YourModule').config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
        templateUrl: 'chapter.html',
        controller: ChapterCntl
    });
});

function ChapterCntl($scope, $routeParams) {
    $scope.name = "ChapterCntl";
    $scope.params = $routeParams;
}

所以这样的网址：/Book/Moby/ch/1将在$routeParams中包含以下属性：

$routeParams = {"bookId":"Moby","chapterId":"1"}

POST URL的角度路由

1 个答案:

更新回答：

原始答案：