Angular 视图中的链接无效

Question

我刚开始尝试 AngularJS 并且遇到了一个问题。

我的主页呈现一个 <ng-view> 元素，我设置了以下路由：

(function () {
   var routes = function ($routeProvider) {
      $routeProvider.
         when('/', {
            templateUrl: 'Home/Overview',
            controller: 'OverviewPageController'
         })
         .when('/Issue/:id', {
            templateUrl: 'Home/Issue'
         })
         .otherwise({ redirectTo: '/' });
   }

   routes.$inject = ['$routeProvider'];

   angular.module('PublicationSchedulerApp')
      .config(routes);

}());

如果我在 <ng-view> 之外添加一个 link 标签：

<a ng-href="#/Issue/123">Issue</a>

'Issue' 页面按预期加载到视图中。

然而，在我的例子中，Overview 控制器通过异步 Ajax 调用加载一些数据，然后使用自定义指令呈现 table，而自定义指令又使用 <ng-repeat>。如果我在此 directive/table:

中创建相同的 link

<tr ng-repeat="issue in issues">
   <td>
      <a ng-href="#/issue/{{ issue.issueId }}">{{ issue.subject }}</a>
   </td>
</tr>

路由不起作用。如您所见，我尝试将 link 属性从 href 更改为 ng-href，但这似乎没有任何区别。我猜测数据的异步加载以某种方式破坏了路由，但我不确定如何修复它。一些帖子建议我在数据加载后重新加载 $route：

angular.module('PublicationSchedulerApp')
.run(['$route', function ($route) {
   $route.reload();
}]);

但这似乎也没有任何区别。

任何帮助将不胜感激 - 谢谢。

Answer 1

在Angular中，路由区分大小写。因此，请确保您的链接与您的路线相匹配。

<tr ng-repeat="issue in issues">
   <td>
      <a ng-href="#/Issue/{{ issue.issueId }}">{{ issue.subject }}</a>
   </td>
</tr>

您也可以使用 ui-router，这样您就可以使用州名称而不是 URL 创建链接（更易于维护且不易出错）。

Angular 视图中的链接无效

Angular Links in view not working

angularjs

angularjs-routing