ui路由器.从对象/功能获取状态名称 [英] ui-router. get state name from object/function

问题描述

我想知道，有什么方法可以用对象或函数引用状态吗?

I wonder, is there any way to reference states in view with object or function?

只是将视图与状态定义脱钩.例如.如果我更改了州名，则不必在视图中的任何地方都进行更改.

Just to decouple views from states definition. E.g. if I change state name I don't have to change it everywhere in my views.

推荐答案

可以在这里找到以下描述的一种解决方案，它是有效的

One solution, described below, could be found here, as a working plunker

在此示例中，我们将为某些实体(例如员工)定义状态，

In this example we will define state for some entity (e.g. employee) like:

1. 列表视图和
2. 详细信息视图.

1. list view and
2. detail view.

让我们使用一些变量entityName来扮演解耦命名的角色:

Let's use some variable entityName to play the role of the decoupled naming:

var entityName = "employee";

$stateProvider
    .state(entityName, {
        url: '/' + entityName,
        views: {
          ...
      }})

    .state(entityName + '.detail', {
        url: '/{{Id}}',
        views: {
          ...
      }});

从列表导航到详细信息视图(如我们所见，没有使用明确的雇员"名称):

Navigation from the list to the detail view (As we can see, there is no explicit "employee" name used):

<a ui-sref="{{detailLink(item)}}" >{{item.Name}}</a>

接下来，我们必须定义detailLink(item).我们将在这里直接在controller中进行操作，但是它可能是某些ListModel实例，封装了更多的操作(分页，排序)，包括detailLink.

Next we have to define the detailLink(item). We will do it directly in the controller here, but it could be some ListModel instance instead, encapsulating more operations (paging, sorting), including the detailLink.

controller:['$scope','$state',
  function ( $scope , $state){ 

      $scope.detailLink = function (item){

          // here we get the employee in run-time
          var currentState = $state.current.name; 
          var sref = currentState + '.detail({Id:' + item.Id + '})';
          return sref;
      };
}],

就是这样.甚至可能更加复杂...可以找到完整的示例代码(下面以状态定义括起来)并运行

And that's it. It could be even more complex... The complete example code (enclosed below as states defintion) could be found and run here

.config(['$stateProvider',
function( $stateProvider) {

    var entityName = "employee";

    $stateProvider
      .state(entityName, {
        url: '/' + entityName,
        views: {
          body: {
          template: '<div>' +
                    '  <h2>List View</h2> ' +
                    '  <ul ng-repeat="item in items"> ' +
                    '   <li><a ui-sref="{{detailLink(item)}}" >{{item.Name}}</a>' +
                    '  </li></ul>' +
                    '  <h2>Detail View</h2> ' +
                    '  <div ui-view="detail"></div>' +
                    '</div>',
          controller:['$scope','$state',
            function ( $scope , $state){ 

              $scope.items = [{Name : "Abc", Id : 0}, {Name : "Def", Id : 1}];

              $scope.detailLink = function (item){

                 var currentState = $state.current.name;
                 return currentState + '.detail({Id:' + item.Id + '})';
              };
          }],
        }
      }})
      .state(entityName + '.detail', {
        url: '/{{Id}}',
        views: {
          detail: {
          template: '<div>' +
                    '  <label>{{item.Name}} ' +
                    '  <input ng-model="item.Name"}}" type="text" />' +
                    '  <div>current state name: <i>{{state.name}}<i></div> ' +
                    '</div>',
          controller:['$scope','$stateParams','$state',
            function ( $scope , $stateParams , $state){ 
              $scope.state = $state.current
              $scope.item = $scope.items[$stateParams.Id];
          }],
        }
      }});

}])

这篇关于ui路由器.从对象/功能获取状态名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！