无法转换到抽象状态(angular-ui-router) [英] Cannot transition to abstract state (angular-ui-router)

问题描述

我所做的只是删除了 ui-sref(反正我从不喜欢使用它)并在 Javascript 中使用 $state.go.

<!--<td>{{ticker }} <button ui-sref="dash.tags({ticker: ticker})">点击我</button></td>--><td>{{ticker }} <button ng-click="clickTicker(ticker)">点击我</button></td></tr>

<小时>

$scope.clickTicker = function(ticker) {$state.go('dash', { 股票代码:股票代码 });}

<小时>

如果我的父 dashboard 状态对象中没有 abstract: true，那么由于某种原因，我的 TagsList 组件就会消失.

完整代码如下:

var routerApp = angular.module('routerApp', ['ui.router']);routerApp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/dash?AAA');var 破折号 = {name: '破折号',网址:'/破折号'，摘要:真实，意见:{'': { templateUrl: 'dashboard.html' },'tickersList@dash':{templateUrl: 'tickers-list.html',控制器:'tickersController'},'alertsList@dash':{控制器:'警报控制器'，templateUrl: 'alerts-list.html',}}};var 股票代码 = {name: 'dash.tickers',url: '?ticker',参数:{股票代码:'AAA'},意见:{'tickersList@dash':{templateUrl: 'tickers-list.html',控制器:'tickersController'}}}var 标签 = {name: 'dash.tags',url: '?ticker',参数:{股票代码:'AAA'},意见:{'标签列表@破折号':{templateUrl: 'tags-list.html',控制器:'标签控制器'}}}$stateProvider.state(破折号).state(标签)});routerApp.controller('tagsController', function($scope, $state, $stateParams) {$scope.ticker = $state.params.ticker;函数 getList(ticker) {开关(股票代码){case 'AAA' : return ['aaa tag 1', 'aaa tag 2', 'aaa tag 3'];case 'BBB' : return ['bbb tag 1', 'bbb tag 2', 'bbb tag 3'];case 'CCC' : return ['ccc tag 1', 'ccc tag 2', 'ccc tag 3'];}}$scope.tags = getList($state.params.ticker);this.$onInit = function() {console.log('onInit tagsController');};});routerApp.controller('tickersController', function($scope, $state) {$scope.tickers = ['AAA'、'BBB'、'CCC'];$scope.clickTicker = function(ticker) {$state.go('dash', { 股票代码:股票代码 });}this.$onInit = function() {console.log('onInit tickersController', $state.params.ticker);};});routerApp.controller('alertsController', function($scope, $state) {this.$onInit = function() {console.log('onInit alertsController', $state.params.ticker);};});

解决方案

使用 $state.go 你去 /dash?ticker=ticker，但是 /dash 是一个抽象状态，所以这就是你得到错误的原因.

您的 tickers 和 tags 状态的 url 定义不正确.你可能想要像 url: 'tickers?ticker' 之类的东西.

https://plnkr.co/edit/5JhQx64WF3tgdm02qKzJ?p=preview

All I did that broke my app was remove the ui-sref (I never like using that anyways) and went with a $state.go inside of the Javascript.

<tr ng-repeat="ticker in tickers">
  <!--<td>{{ ticker }} <button ui-sref="dash.tags({ticker: ticker})">Click Me</button></td>-->
  <td>{{ ticker }} <button ng-click="clickTicker(ticker)">Click Me</button></td>
</tr>

---

$scope.clickTicker = function(ticker) {
  $state.go('dash', { ticker: ticker });
}

---

If I don't have abstract: true in my parent dashboard state object then for some reason my TagsList component disappears.

Full code below:

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

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dash?AAA');

    var dash = {
      name: 'dash',
      url: '/dash',
      abstract: true,
      views: {
        '': { templateUrl: 'dashboard.html' },
        'tickersList@dash': {
          templateUrl: 'tickers-list.html',
          controller: 'tickersController'
        },
        'alertsList@dash': {
          controller: 'alertsController',
          templateUrl: 'alerts-list.html',
        }
      }
    };

    var tickers = {
      name: 'dash.tickers',
      url: '?ticker',
      params: {
        ticker: 'AAA'
      },
      views: {
        'tickersList@dash': {
          templateUrl: 'tickers-list.html',
          controller: 'tickersController'
        }
      }
    }

    var tags = {
      name: 'dash.tags',
      url: '?ticker',
      params: {
        ticker: 'AAA'
      },
      views: {
        'tagsList@dash': {
          templateUrl: 'tags-list.html',
          controller: 'tagsController'
        }
      }
    }

    $stateProvider
      .state(dash)
      .state(tags)

});

routerApp.controller('tagsController', function($scope, $state, $stateParams) {
    $scope.ticker = $state.params.ticker;

    function getList(ticker) {
      switch(ticker) {
          case 'AAA' : return ['aaa tag 1', 'aaa tag 2', 'aaa tag 3'];
          case 'BBB' : return ['bbb tag 1', 'bbb tag 2', 'bbb tag 3'];
          case 'CCC' : return ['ccc tag 1', 'ccc tag 2', 'ccc tag 3'];
      } 
    }

    $scope.tags = getList($state.params.ticker);

    this.$onInit = function() {
      console.log('onInit tagsController');
    };
});

routerApp.controller('tickersController', function($scope, $state) {
    $scope.tickers = [
      'AAA', 'BBB', 'CCC'
    ];

    $scope.clickTicker = function(ticker) {
      $state.go('dash', { ticker: ticker });
    }

    this.$onInit = function() {
      console.log('onInit tickersController', $state.params.ticker);
    };
});

routerApp.controller('alertsController', function($scope, $state) {
    this.$onInit = function() {
      console.log('onInit alertsController', $state.params.ticker);
    };
});

解决方案

With $state.go you go to /dash?ticker=ticker, but /dash is an abstract state, so this is why you get an error.

Your tickers and tags states have their urls defined incorrectly. You probably want something like url: 'tickers?ticker'.

这篇关于无法转换到抽象状态(angular-ui-router)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！