angularjs ui-router: Nhận danh sách các trạng thái con của một trạng thái cụ thể

Question

Bạn có biết cách nào trong ui-router để nhận danh sách trạng thái con của một trạng thái nhất định không?

Tôi đang triển khai SPA phức tạp có thể điều hướng sâu 4 cấp bằng cách sử dụng ui-router.

Tôi muốn triển khai giao diện tab điều hướng cho cấp độ thứ hai được tạo tự động từ bảng bộ định tuyến.

Vì lý do đó, tôi cần có danh sách trẻ em trực tiếp của một tiểu bang cụ thể (có thể là trạng thái trừu tượng). Cách duy nhất mà tôi đã tìm thấy để có được các tiểu bang là để làm một $state.get() và có được danh sách đầy đủ các tiểu bang, nhưng điều đó có nghĩa rằng tôi sẽ phải phân tích các trạng thái con một mình, và tôi nghĩ rằng đó là mã đã được viết trong ui -kéo.

Tôi đặt câu hỏi này ở đây trong trường hợp có bất kỳ ai có kinh nghiệm về mã nguồn hoặc biết plugin hoặc mô-đun có thể giúp tôi về điều này. Trong khi đó, tôi sẽ tự nghiên cứu và đăng kết quả nếu tôi tìm thấy một cái gì đó.

Answer 1

Cuối cùng, phải tự mình thực hiện chức năng.

Trong bộ điều khiển của tuyến đường trừu tượng có giao diện tab, sàng lọc các trạng thái sử dụng một biểu thức chính quy lợi dụng quy ước đặt tên mặc định cho các tuyến đường:

var routeName='Root.Parent'; // this is the "actual" route 

// this regex is going to filter only direct childs of this route. 
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i"); 
var states = $state.get(); 

// this uses lodash to filter the states based on the regex 
var navLinks = _.filter(states, (s) => { 
    return secondRouteOnlyRegex.test(s.name) && !s.abstract; 
}); 
$scope.tabs = navlinks; 

định nghĩa con đường của tôi có một tài sản có chứa data tiêu đề và siêu dữ liệu khác cần thiết để hiển thị các tab.

mẫu của tôi trông giống như thế này (sử dụng bootstrap):

<ul class="nav nav-tabs"> 
    <li ng-repeat="state in tabs" ui-sref-active="active"> 
     <a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a> 
    </li> 
</ul> 

Answer 2

Nếu bạn sử dụng stateHelper, nó cho phép bạn đăng ký quốc gia như thế này (từ stateHelper readme):

angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ]) 
    .config(function(stateHelperProvider){ 
     stateHelperProvider 
      .state({ 
       name: 'root', 
       templateUrl: 'root.html', 
       children: [ 
        { 
         name: 'contacts', 
         template: '<ui-view />', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'contacts.list.html' 
          } 
         ] 
        }, 
        { 
         name: 'products', 
         templateUrl: 'products.html', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'products.list.html' 
          } 
         ] 
        } 
       ] 
      }) 
      .state({ 
       name: 'rootSibling', 
       templateUrl: 'rootSibling.html' 
      }); 
     }); 

Trong bộ điều khiển điều hướng, bạn có thể sử dụng thuộc tính children trên trạng thái "gốc". Ví dụ: tôi đang sử dụng điều này để hiển thị tất cả trẻ em của trạng thái hiện tại:

angular.module('app') 
    .controller('TransportController', function($scope, $state) { 
     $scope.items = $state.current.children;  
    }); 

Hy vọng điều này sẽ hữu ích.

Answer 3

Tôi đã làm điều này đó là dễ dàng hơn và nhanh hơn:

var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });