不能過渡到抽象的狀態（角UI路由器）

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: 'tickers?ticker'。