AngularJS“动态”/“通配符”路由

Question

我正在使用 Angular ui 路由器，如下所示：

angular
  .module('app', [
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('start', {
        url: '/',
        templateUrl: 'templates/start.html',
        controller: 'startCtrl'
      })
      .state('dictionary', {
        url: '/dictionary',
        templateUrl: 'templates/dictionary.html',
        controller: 'dictionaryCtrl'
      })
  }])

这很好用。

现在我想做的是继续从 /dictionary 构建 URL。

基本上，字典将包含一组重复的 li 元素，这些元素是基于对象数组呈现的。 请注意，对象数组是从可能不时包含不同对象集的源中检索的。

<ul>
      <li ng-repeat="element in array">
          {{element}}
      </li>
</ul>

通过单击上述列表中的元素，控制器将更新数组并根据子元素将上述列表重新渲染到源中的相应元素。

现在解决问题

首先，我希望将网址附加为：

/dictionary/selectedelement

如果我会在我的浏览器中回击我希望返回

/dictionary

如果我要添加书签

/dictionary/selectedelement

我希望能够根据最后一个 url 段呈现列表。

如果可能的话，我也想使用相同的控制器。

Answer 1

如果我没看错，你有一个动态状态列表，并且你想使用同一个控制器。

类似

/dictionary/my-first-element
/dictionary/my-second-element

是吗？

嗯，这正是我们在 Wishtack.com 上用来处理 i18n url 的方法。

我们有一个 utils 服务，它带有一个从配置对象生成状态的方法。

在您的情况下，它看起来像这样（因为我们使用的是 underscore.js）：

stateList = _.map(stateConfigList, function (stateConfig) {
  return {
    controller: 'YourGenericController',
    name: stateConfig.name,
    url: '/dictionary/' + stateConfig.url,
    /* You can add any field you want so you can have different behaviours depending on the state using the same controller. */
    settings: stateConfig.settings
  }
});

angular.forEach(stateList, function (state) {
  $stateProvider.state(state.name, state);
});

您的控制器每个状态可以有不同的行为：

$scope.showCrazyStuff = $state.current.settings.showCrazyStuff;

这就是你要找的吗？

关于后退按钮，您可以使用以下方法覆盖历史记录：

 $window.history.pushState()

但是恕我直言，我认为这很糟糕，因为如果我来自您的 /dictionary/my-first-element 上的另一个网站并且我回击，我希望我的浏览器返回我来自的网站而不是/字典。作为用户，我会感到被绑架了。

最后一件事，因为状态配置是在配置阶段和服务注入之前使用 $stateProvider 执行的，AFAIK，我认为没有一种干净的方法可以在控制器运行时动态添加和删除状态。顺便说一句，再次出现这种行为会很奇怪，如果我来自外部网站，angular-ui-router 应该已经知道所有可能的状态，以便知道它应该运行哪个控制器，否则，我会被重定向到默认状态。

希望对你有帮助！

更新：

哦！我在想一些更容易的事情。你为什么不声明一个像这样的状态 { url: '/dictionary/:itemId' } 然后在你的控制器中，你可以使用 "$stateParams.itemId" 来知道用户正在寻找哪个元素。

第一个解决方案的主要优点是您可以将不同的控制器/模板对分配给一组 URL。

在 Wishtack 上，我们还使用了一种技巧，可以根据上下文使用不同的控制器，如下所示：

.controller('Controller', function ($stateParams) {
  if ($stateParams...) {
     /* Yes, we use classes using dejavu and ControllerOne and ControllerTwo extend a base class ControllerBase. */
     return new ControllerOne();
  }
  else {
     return new ControllerTwo();
  }
});