AngularJS 路由助手

Question

任何想法如何构建解决方案，这有助于以更方便的方式在 View 中生成 url，而不是像这样的硬编码:

<a ng-href="#/Book/{{item.bookId}}/ch/{{item.id}}">Chapter {{item.id}}</a>

我想使用:

<a chapters="[item.bookId, item.id]">Chapter {{item.id}}</a>

所以它检查路由并为每个路由特定指令生成。

我尽可能对最通用的解决方案感兴趣。

Answer 1

我强烈建议您使用 ui-router 及其 $stateProvider 。

var app = angular.module('yourModuleName', ['ui.router']);

app.config(function ($stateProvider) {
  $stateProvider
    .state('book', {
      url: '/Book/:bookId'
    })
    .state('book.chapter', {
      url: '/ch/:id'
    });
});

<a ui-sref="book.chapter({bookId: item.bookId, id: item.id})">Chapter {{item.id}}</a>

沿着这些路线的东西应该可以解决问题。我对您的应用程序的其他参数一点也不熟悉，但是使用传入的参数构建动态 URL 以匹配 $state 是轻而易举的。

用户界面路由器: https://github.com/angular-ui/ui-router

ui-sref(指令): https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref