使用 ng-model 更改 AngularJS 个 url

Question

有什么方法可以用 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() 函数中）

Answer 1

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

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

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

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

reloadOnSearch: true

这会导致 URL 像 http://localhost/myRoute?q=myVal

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

示例

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

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

Answer 2

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

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

with <input type="text" class="form-control" ng-model="search" ng-change="gettext(search)" > 对我有用。但是，欢迎任何人使用 AngulerJs 解决方案：D

使用 ng-model 更改 AngularJS 个 url

Change AngularJS urls with ng-model

angularjs

angularjs-routing

ngroute