url 更改不会触发 angular ui 路由器的状态更改答案

【问题标题】：url change not triggering state change with angular ui routerurl 更改不会触发 angular ui 路由器的状态更改
【发布时间】：2015-10-15 23:16:32
【问题描述】：

我正在使用 Angular ui 路由器来创建这样的主路由

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

export default function routes($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      template: require('./home.html'),
      controller: 'HomeController',
      controllerAs: 'home'
    })

在 HomeController 中，我正在导入一个提供博客文章流的服务。因此，在./home.html 模板中，我正在遍历这样的帖子数组，为每个帖子创建链接

 <span ng-repeat="post in home.posts">

         <a ui-sref="home.detail({postId:post.id})">{{post.title.rendered}}</a>

    </span>

正如您从链接中看到的那样，我预计链接的点击将由home.detail 状态处理。在路由器中，我这样做，希望每个帖子都有一个 URL（当我单击链接时），例如 http://localhost:8888/1 或 http://localhost:8888/4。但是，当我单击链接时，url 会更改，但不会加载 ./post.html 模板，并且下面的控制器代码中的日志语句不会运行。控制台中没有错误。

问题：为什么当我点击帖子的链接时处理单个链接的点击（加载新模板，记录 stateParams）的路由器代码没有运行（但 url 更改）？

  $stateProvider
    .state('home', {
      url: '/',
      template: require('./home.html'),
      controller: 'HomeController',
      controllerAs: 'home'
    })
   .state('home.detail', {


        url: '{postId:[0-9]{1,4}}',
        template: require('./post.html'),
        controller: ['$scope', '$stateParams',
            function (  $scope,   $stateParams) {
                console.log($scope, "$scope", $stateParams, "$stateParams");
                $scope.post = $stateParams;

            }],

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您的父状态需要一个 ui 视图。来自ui-router的documentation

子状态会将其模板加载到其父级的 ui 视图中。

【讨论】：