使用 ng-model 更改 AngularJS 网址答案

【问题标题】：Change AngularJS urls with ng-model使用 ng-model 更改 AngularJS 网址
【发布时间】：2016-03-26 09:41:53
【问题描述】：

有没有办法用 ng-model 改变 AngularJS 的 url？

var scotchApp = angular.module('scotchApp', ['ngRoute']);

scotchApp.controller('mainController', function($scope) {
    $scope.gettext = function (){
          
    };
});

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="eventChange.js"></script>
    </head>
    <body ng-controller="mainController">
        <div class="container">
            <div class="row">
                <div class="col-sm-1">Search</div>
                <div class="col-sm-3"><input type="text" class="form-control" ng-model="search" ng-change="gettext()"></div>
            </div>
        </div>          
    </body>
</html>

当用户在搜索框中输入“myVal”时，我需要将 URL 更改为类似 http://localhost/angulRoute/search=myVal 的内容（实际上是在带有搜索值的 gettext() 函数中）

【问题讨论】：

标签： angularjs angularjs-routing ngroute

【解决方案1】：

你可以在你的控制器中做这样的事情：

$scope.query = $location.search().q;

$scope.$watch('query', function(newValue) {
    $location.search('q', newValue);
});

您需要将 $location 注入您的控制器，并确保在您的路由配置中包含：

reloadOnSearch: true

这将产生一个类似http://localhost/myRoute?q=myVal的网址

注意：我还会将 ng-model-options="{updateOn:'blur'}" 添加到您的输入中，以防止在每次按键时更新 URL。

示例

这是一个如何执行此操作的工作示例：http://plnkr.co/edit/tphqPeJ0dO74Ux7WpXlU?p=preview

请注意，由于 plnkr.co 的工作方式，您不会在该站点的地址栏中看到 URL 更改。如果您下载代码并在本地运行，则地址栏中的 URL 将更新。

【讨论】：

嗨@Shaun Scovil， var scotchApp = angular.module('scotchApp', ['ngRoute']); scotchApp.controller('mainController', function($scope) { $scope.$watch('search', function(newValue) { $routeParams.search = newValue; }); }).config(function($routeProvider, $ locationProvider) { reloadOnSearch: true; }); 我是这样添加的，但似乎不起作用。如果我错了，请原谅我，但我是 AngularJs 的新手
您需要将 $routeParams 注入您的控制器。只需将其作为参数添加到控制器函数即可，如下所示： scotchApp.controller('mainController', function($scope, $routeParams) { ... });
另外，您没有正确配置您的路线。使用 $routeProvider.when('/myRoute', { templateUrl: '/path/to/template.html', controller: 'mainController', reloadOnSearch: true }); -- 文档在这里：docs.angularjs.org/api/ngRoute/provider/$routeProvider
实验了这个，发现更新$routeParams并不会更新地址栏中的URL。但是，您可以使用$location.search() 方法来获取/设置查询参数。这是一个工作示例：plnkr.co/edit/tphqPeJ0dO74Ux7WpXlU?p=preview
没问题。我想你也可以使用 $route.updateParams()，它在设置查询参数时与 $location.search() 基本相同。

【解决方案2】：

您好，我找到了一个 javascript 解决方案。

 $scope.gettext = function (search){
    window.history.pushState("object or string", "Title", "/angulRoute/search="+search);
};

<input type="text" class="form-control" ng-model="search" ng-change="gettext(search)" > 为我工作。但是，任何人都有 AngulerJs 解决方案，欢迎他们：D

【讨论】：