在 AngularJS 中传递带有斜线的数据

Question

当点击一个链接时，我可以将数据传递到另一个页面：

<div ng-repeat="app in apps | filter:{Name: searchText}" class="slide">
    <a href="#/app/{{app.Name}}">{{app.Name}} {{app.Version}}</a>
</div>

当新页面出现时，我看到了应用的名称：

这是显示名称的标记：

<p>{{appName}}</p>

但是，如果我想传递 ID，像这样：

<div ng-repeat="app in apps | filter:{Name: searchText}" class="slide">
    <a href="#/app/{{app.Id}}">{{app.Name}} {{app.Version}}</a>
</div>

这行不通。当我单击 ID 时，浏览器中没有任何反应。 F12 工具控制台窗口中没有错误。 Fiddler 没有显示任何活动。我认为这是因为 ID 中有一个斜线（这是 RavenDB 约定）。这是我将鼠标悬停在链接上时看到的内容：

注意最后一个斜线。我认为这是在搞砸。

所以我尝试使用stackoverflow solution 来逃避斜线。现在，当我悬停时，我看到了这个：

我以为这样就可以了，但我又回到了同样的行为：当我点击它时没有任何反应。 Fiddler 中也没有。我错过了什么？ （如果我更改标记以再次传递 Name 属性，一切正常。所以接线很好。）

编辑

我刚刚意识到，并不是什么都没有发生。我的路线提供商正在启动并带我回到我已经在同一页面上：

$routeProvider.otherwise({ redirectTo: '/apps' });

这是整个路由配置：

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/apps', { templateUrl: 'partials/apps.html', controller: 'appsController' });
    $routeProvider.when('/servers', { templateUrl: 'partials/servers.html', controller: 'serversController' });
    $routeProvider.when('/app/:appId?', { templateUrl: 'partials/app.html', controller: 'appController' });
    $routeProvider.otherwise({ redirectTo: '/apps' });
}]);

解决方法

设置这样的路线可以让我点击正确的页面。唯一的问题是我需要在 ID 的数字部分（在接收页面上）前加上文字“applications/”。我想我可以做到。

$routeProvider.when('/app/applications/:appId?', { templateUrl: 'partials/app.html', controller: 'appController' });

为了完整起见，这是我在接收控制器中必须做的：

.controller('appController', function ($scope, $routeParams) {

      $scope.appId = "applications/" + $routeParams.appId;
})

Answer 1

这个fiddle 重现了你的问题。这是一个小型应用程序，有 2 条路线：/apps 和 /app/:appId。如果走/app/:appId路由，页面显示Hello, {{appId}}，否则显示Hello, apps。在启动方法 (run) 中，我使用 $location.path 添加了硬编码重定向到“/app/applications%2F1121”。如您所见，使用$location.path('/app/applications%2F1121') 更改路由效果很好：应用程序启动并为我们提供正确的ID：Hello, applications/1121。但是，使用href 更改路由不起作用：如果您单击链接，应用程序将显示Hello, apps，这意味着在无法识别链接中的/app/applications%2F1122 url 之后采用/apps 路由。

因此，另一种解决方法是始终使用$location.path 更改路由。将此函数放入您的$routeScope 并使用ng-click 调用它（fiddle）。

.run(function ($rootScope, $location) {
    $rootScope.go = $location.path.bind($location);
})

<a ng-click="go('/app/applications%2F1122')" href="">

仍然需要转义斜线，但此解决方法不需要您更改路由配置，因此它可以处理任何 ID。