在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）中，我已将硬编码重定向添加到＆＃39; / app / applications％2F1121＆＃39;使用$location.path。如您所见，使用$location.path('/app/applications%2F1121')更改路线效果很好：应用程序启动并为我们提供正确的ID：Hello, applications/1121。但是，使用href更改路线不起作用：如果您点击该链接，该应用会显示Hello, apps，这意味着/apps路线是在/app/applications%2F1122之后拍摄的链接中找到的网址未被识别。

因此，另一种解决方法是始终使用$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。