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

问题描述

我想知道，有没有办法在视图中引用对象或函数的状态?

只是为了将视图与状态定义分离.例如.如果我更改状态名称，则不必在我的视图中随处更改它.

解决方案

可以在此处找到一种解决方案，如下所述，作为一个有效的 plunker

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

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

让我们使用一些变量entityName来起到解耦命名的作用:

var entityName = "employee";$stateProvider.state(实体名称，{网址:'/' + 实体名称，意见:{...}}).state(entityName + '.detail', {网址:'/{{Id}}'，意见:{...}});

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

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

接下来我们必须定义detailLink(item).我们这里会直接在controller中做，但也可以是一些ListModel实例，封装更多的操作(分页、排序)，包括detailLink.

controller:['$scope','$state',功能( $scope ， $state){$scope.detailLink = 函数(项目){//这里我们在运行时获取员工var currentState = $state.current.name;var sref = currentState + '.detail({Id:' + item.Id + '})';返回 sref；};}],

就是这样.它可能更复杂......可以找到完整的示例代码(作为状态定义包含在下面)并运行这里

.config(['$stateProvider',函数($stateProvider){var entityName = "员工";$stateProvider.state(实体名称，{网址:'/' + 实体名称，意见:{身体: {模板:'
'+' <h2>列表视图</h2>' +' <ul ng-repeat="项目中的项目">' +' <li><a ui-sref="{{detailLink(item)}}" >{{item.Name}}</a>'+'</li></ul>'+' <h2>详细视图</h2>' +' <div ui-view="detail"></div>'+'</div>',控制器:['$scope','$state',函数( $scope ， $state){$scope.items = [{Name : "Abc", Id : 0}, {Name : "Def", Id : 1}];$scope.detailLink = 函数(项目){var currentState = $state.current.name;return currentState + '.detail({Id:' + item.Id + '})';};}],}}}).state(entityName + '.detail', {网址:'/{{Id}}'，意见:{细节: {模板:'
'+' <标签>{{item.Name}} ' +' <input ng-model="item.Name"}}" type="text"/>'+' <div>当前状态名称:<i>{{state.name}}<i></div>' +'</div>',控制器:['$scope','$stateParams','$state',函数( $scope ， $stateParams ， $state){$scope.state = $state.current$scope.item = $scope.items[$stateParams.Id];}],}}});}])

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. list view and
2. detail view.

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>

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屋！