AngularJS路线助手

Question

任何有关如何构建解决方案的想法,有助于以更方便的方式在视图中生成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以匹配a $state是一件轻而易举的事.

ui-router:https://github.com/angular-ui/ui-router

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