無法轉換為抽象狀態（Angular-UI-Router）

Question

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

我所做的所有破壞我的應用程序的工作就是刪除ui-sref（我從不喜歡使用它），並在Javascript中使用了$state.go 。

<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 });
}

---

如果我在父dashboard狀態對象中沒有abstract: true ，則出於某種原因我的TagsList組件將消失。

完整代碼如下：

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);
    };
});

Answer 1

使用$state.go可以轉到/dash?ticker=ticker ，但是/dash是抽象狀態，所以這就是為什么會出錯的原因。

您的tickers和tags狀態的URL定義不正確。 您可能想要類似url: 'tickers?ticker' 。