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>：

之外添加链接标记

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

“问题”页面按预期加载到视图中。

然而，在我的情况下，Overview控制器通过异步Ajax调用加载一些数据，然后使用自定义指令呈现一个表，而自定义指令又使用<ng-repeat>。如果我在此指令/表中创建相同的链接：

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

路由不起作用。正如您所看到的，我已经将链接属性从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，这样您就可以使用州名而不是网址创建链接（更易于维护且不易出错）。

角度链接在视图中不起作用

1 个答案: