angularjs – ui-router.从对象/函数获取状态名称

在这个例子中,我们将为某个实体(例如员工)定义状态,如：

>列表视图和
>详细信息视图.

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

var entityName = "employee";

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

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

从列表导航到详细视图(我们可以看到,没有使用明确的“员工”名称)：

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

接下来我们要定义detailLink(item).我们将在此处直接在控制器中执行此操作,但它可能是一些ListModel实例,而是封装更多操作(分页,排序),包括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;
      };
}],

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

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

    var entityName = "employee";

    $stateProvider
      .state(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){ 

              $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',views: {
          detail: {
          template: '<div>' +
                    '  <label>{{item.Name}} ' +
                    '  <input ng-model="item.Name"}}" type="text" />' +
                    '  <div>current state name: <i>{{state.name}}<i></div> ' +
                    '</div>','$stateParams',$stateParams,$state){ 
              $scope.state = $state.current
              $scope.item = $scope.items[$stateParams.Id];
          }],}
      }});

}])