Question

当我使用页内链接导航时，为什么不更新{{ username }}变量（在下面的示例中）？该变量仅在初始页面加载时设置（等于匿名）并且不再更新，为什么？代码简单明了（http://jsbin.com/OTApeYI/1/）：

   <!doctype html>
    <html lang="en" ng-app="examp">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">    </script>
    </head>
    <body ng-controller="ExampleCtrl">
    <a href="#">Home</a>, <a href="Admin">Admin</a>

    Your user name is: {{ username }}

    <script>
angular.module('examp', ['examp.controllers']).
  config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/:username', {controller: 'ExampleCtrl'});
    $routeProvider.otherwise({redirectTo: '/'});
  });

angular.module('examp.controllers', [])
  .controller('ExampleCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
    $scope.username = $routeParams.username ? $routeParams.username : "Anonymous";
  }]);
    </script>
    </body>
    </html>

Answer 1

因为您总是使用'ExampleCtrl'控制器，所以您只需阅读$routeParams一次。 $routeParams对象仅在创建控制器一次时创建。它不会动态更新。因此，即使您的路线可能已从说/macadamia更改为/macadamia123，但$routeParams对象仍然与为/macadamia路线创建控制器时的对象相同（所以$routeParams.username仍然等于'/macadamia'）。您需要重新加载控制器才能再次读取$routeParams。

我希望$routeParams对象长时间保持动态，但不幸的是，角度$routeProvider不能正常工作。

Answer 2

首先，我认为您需要ngView指令来激活路由。其次，ExampleCtrl仅创建一次，并且您将$scope.username设置为当时的当前值。 $routeParams.username是一个简单的字符串，您也可以设置$scope.username = ''然而，您可以在范围内存储$routeParams对象并绑定到username属性(SAMPLE)。我也禁用了html5，或者我认为它不适用于jsbin。

<div ng-view></div>
<p>Your user name is: {{ username }}</p>
<p>params.username is: {{ params.username }}</p>
<p>eventusername is: {{ eventusername }}</p>
<p>JSON:</p><pre>{{ params|json }}</pre>

在你的控制器中：

$scope.params = $routeParams;

另一种选择是寻找路线变化事件并处理它们：

$scope.$on("$routeChangeStart", function(event, next, current) {
  $scope.eventusername = next.params.username;
});

导航时更新模型变量

2 个答案: