【问题标题】:UI-Router how to determine current state in resolve entries as either parent or child stateUI-Router 如何在解析条目中将当前状态确定为父状态或子状态
【发布时间】:2014-11-15 21:58:49
【问题描述】:

状态被设置为允许通过将父解析条目注入到子中来重复使用,除了创建新的包实例之外,所有这些都有效。我不知道如何确定dashboard.package 状态是要转换到的实际状态。即使存在用于子状态的第二个参数,也只有一个出现在 $state.params 中,所以我无法检查 isUndefined 并且知道dashboard.package 是状态。

状态的逻辑是如果不存在第二个参数,则不存在文档并且需要创建新实例,否则状态为编辑并且存在实例。

// Parent dashboard
.state('dashboard', {
    url: "/dashboard",
    abstract: true,
    templateUrl: '/app/dashboard.html',
    resolve: {
        UserAuth: ...,
        GetPackageTypes: ...
    }
}

  // Parent dashboard package
  .state('dashboard.package', {
      url: "/package/:packageInstance",
      templateUrl: '/app/dashboard/views/package.html',
      controller: 'PackageController',
      controllerAs: 'packageCtrl',
      resolve: {
          GetPackageType: [function(){

              // HTTP request for package type 
          }],
          CreatePackage: ['$state', '$stateParams', 'GetPackageType', 
                function($state, $stateParams, GetPackageType){

              // ISSUE: Determine if dashboard.package is the actual state???
              // if it is then create new package instance, otherwise will drop 
              // into dashboard.package.edit and package instance will be used

              // Example URL for this state: #/dashboard/package/type

              // Even if both params exist only see one here so no good
              console.log("state.params = ", $state.params);

              // Shows previous state name so no good
              console.log("state.current = ", $state.current);
              console.log("state.current.name = ", $state.current.name);
              console.log("state.$current.self.name = ", $state.$current.self.name);

              // Returns false so no good
              console.log("$state.is = ", $state.is('dashboard.package') );
              console.log("$state includes = ", $state.includes('dashboard.package') );
          }]
      }
  }

    // Child dashboard package
    .state('dashboard.package.edit', {
        url: "/edit/:packageInstanceId",
        templateUrl: '/app/dashboard/views/package.html',
        controller: 'PackageController',
        controllerAs: 'packageCtrl',
        resolve: {
            GetPackageInstance: ['$state', '$stateParams', 'GetPackageType', 
                function($state, $stateParams, GetPackageType){

                // HTTP request for package instance uses package type

                // Example URL for this state: #/dashboard/package/type/edit/3858
            }],
        }
    }

替代解决方案

为了避免浪费更多时间试图弄清楚这一点,或者将一些时髦的工作放在一起,这可能会在未来的一些更新中失败,我最终创建了第二个抽象状态 dashboard.package 与我所有的控制器、templateUrl 和使用包类型的单个参数进行初始解析,并将创建包拆分为单独的状态dashboard.package.create,与dashboard.package.edit处于同一级别。如果有人觉得有用的话,效果很好,不会让人头疼。

// Parent dashboard
.state('dashboard', {
    url: "/dashboard",
    abstract: true,
    templateUrl: '/app/dashboard.html',
    resolve: {
        UserAuth: ...,
        GetPackageTypes: ...
    }
}

.state('dashboard.package', {
            url: "/package/:packageType",
            abstract: true,
            templateUrl: '/app/dashboard/views/package.html',
            controller: 'PackageController',
            controllerAs: 'packageCtrl',
            resolve: { 
                GetPackage: // injecting parent GetPackageTypes and using parameter
            }
}

.state('dashboard.package.create', {
    url: "",
    resolve: { 
        CreatePackage: // injecting parent GetPackage
    }
}

.state('dashboard.package.edit', {
    url: "/edit/:packageinstance",
    resolve: { 
        GetPackageInstance: // injecting parent GetPackage and using parameter
    }
}

【问题讨论】:

    标签: angularjs angular-ui-router


    【解决方案1】:
    //$state.current.name will have either name of parent or child.
    resolve: {
      isChild: function($state, STATES) {
        return $state.current.name === STATES.CHILD_NAME;
      }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-28
      • 2014-10-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多