Question

尝试使用参数导航到父路线的子路线。 ng-click确实关闭，我可以在控制台中看到它注册点击，但我没有对状态进行任何更改。我宣布ui-sref错了吗？

<body ng-controller="myController as $ctrl" style="{margin-top: 70px;}">
<div>
  <button><a ui-sref="idLevel.index({something: 1})" ng-click="$ctrl.test()">Link1</a></button>
  <button><a ui-sref="idLevel.other({something: 2})" ng-click="$ctrl.test2()">link2</a></button>
</div>
<ui-view>
  <div>
    test
  </div>
</ui-view>

// Code goes here

function appRoute($stateProvider, $locationProvider) {
  $locationProvider.html5Mode(false);
  $stateProvider
    .state('idLevel', {
      url: '/:something',
      abstract: true,
    })
    .state('idLevel.index', {
      url: '/index/',
      component: 'component1'
    })
    .state('idLevel.other', {
      url: '/other/',
      component: 'component2'
    })
}

var component1 = {
  template: '<h1>indexRoute</h1><br><p>HELP!!{{$ctrl.params}}</p>',
  controller: function($stateParams) {
    var ctrl = this;
    console.log('component1', $stateParams);
    ctrl.params = $stateParams.id;
  }
};

var component2 = {
  template: '<div><h1>otherRoute</h1><br><p>Help2 {{$ctrl.params}}</div>',
  controller: function($stateParams) {
    var ctrl = this;
    console.log('component2', $stateParams);
    ctrl.params = $stateParams.id;
  }
};

function myController($stateParams) {
  var ctrl = this;
  ctrl.test = test;
  ctrl.test2 = test2;

  function test() {
    console.log('TEST LINK!', $stateParams.id)
  }

  function test2() {
    console.log('TEST 2', $stateParams.id)
  }
}

angular.module('app', ['ui.bootstrap', 'ui.router'])
  .config(appRoute)
  .controller('myController', myController)
  .component('component1', component1)
  .component('component2', component2);
myController.$inject = ['$stateParams'];
appRoute.$inject = ['$stateProvider', '$locationProvider'];
component1.$inject = ['$stateParams'];
component2.$inject = ['$stateParams'];

Plnkr here

我觉得我在这里错过了一些简单的东西，但我无法弄清楚为什么它不允许我去路线。

Answer 1

父状态需要在其中有<ui-view>个模板，以便呈现子状态。

请注意，在plunker中，您不能使用/作为基础，因为编辑器不在网站的根目录中

Updated plunker

Answer 2

首先你的plunkr看起来与你所展示的代码有点不同，其次，从我所看到的，plunkr似乎正在工作 - 你正在改变状态 - 你无法看到它，因为内容隐藏在标题导航栏。

如果您在单独的窗口（蓝色按钮）中打开plunkr，您可以在单击链接时看到导航栏下的内容发生变化。

UI-Router 1.0.0-beta.3 ui-sref params子路由

2 个答案: