Question

我注意到我尝试修复的Angular js应用程序出现了行为。该应用程序正在使用AngularJS 1.6，并且我仅使用html和AngularJS即可重现此行为。

这是我的index.html文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/angular.min.1.6.js"></script>
</head>
<body ng-controller="mainCtrl">
<span>Number:</span><br/>
<span>{{ inputNumber }}</span><br/>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

这是我的application.js AngularJS控制器文件：

(function() {
var app = angular.module("myApp", []);
app.controller("mainCtrl", function ($scope, $http, $location) {
    $scope.inputNumber = "";
    if ( $location.search().hasOwnProperty( 'number' ) ) {
        $scope.inputNumber = $location.search()['number'];
    }
});
})();

我在Windows工作站桌面上的“ angular app”文件夹中找到了这两个文件。我正在使用以下网址打开index.html文件：

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#!/?number=12345

出现的页面正在显示：

编号： 12345

当我更改分配给查询字符串变量'number'的值时，我会遇到奇怪的行为：

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#!/?number=56789

更改号码并单击Enter后，希望页面显示以下内容：

编号： 56789

但是它仍然显示以下内容：

编号： 12345

如果我在地址栏中单击而不更改任何内容，然后再次单击Enter，它最终会更改为：

编号： 56789

为什么更改值并单击Enter时页面不会第一次更新？有什么我可以解决的吗？

Answer 1

初始化控制器时，从url读取数字的代码仅执行一次。

由于主URL不变，因此无需重新初始化控制器，因此不会从URL再次读取。当您在浏览器的URL栏中按回车键时，页面将重新加载，因此控制器将再次初始化，并从URL中读取您的号码。

最好的解决方案是使用angular router（或更好的ui-router）定义带有数字参数的路由。

如果不是这样，您仍然可以在浏览器中注册（低级）URL更改（hashchange上的window事件）并对此做出反应。

Answer 2

使用AngularJS路由对我有用。我使用以下网址作为指导来帮助我实施解决方案： https://www.guru99.com/angularjs-routes.html

我确实发现有角度的路由js文件的版本需要与正常的有角度的js文件的版本匹配。

我的index.html文件现在看起来像这样：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/angular.1.6.5.min.js"></script>
<script type="text/javascript" src="js/angular-route.1.6.5.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<!-- Angular routing template replaces "div ng-view" tags here -->
<div ng-view></div>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

请注意，我正在使用angular.1.6.5.min.js和angular-route.1.6.5.min.js。

我介绍了第二个html页面，该页面实际显示了我的内容：numberpage.html。该文件的内容如下所示：

My Number:
number = {{ inputNumber }} <br/>

我的application.js文件现在看起来像这样：

(function() {
var app = angular.module("myApp", ['ngRoute']);
app.config(
   function($routeProvider){
        $routeProvider.
        when('/number/:myNumber',{
            templateUrl : 'numberpage.html',
            controller: 'trackCtrl'
        })
});
app.controller("mainCtrl", function ($scope, $routeParams) {
    console.log("mainCtrl controller: begin.");
});
app.controller("trackCtrl", function ($scope, $routeParams) {
    console.log("trackCtrl controller: begin.");
    $scope.inputNumber = $routeParams.myNumber;
    console.log("trackCtrl controller: number = " + $scope.inputNumber);
});
})();

我的网址现在看起来像这样：

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#/number/12345

我希望这对其他人有帮助！

AngularJS查询字符串值未更新

2 个答案: