Question

我试图将参数传递给嵌套的ui-view：

<ui-view user="user"></ui-view>

现在让我解释一下为什么需要这个。这就是我的ui的样子：

它的用户卡Angular组件。在这个组件内部有几个选项卡，例如具有自己状态的子组件。我的目标是从父状态为标签提供用户对象。

我还要展示一些简化的代码：

  .state('user', {
    url: '/user/:userId',
    template: `<user user-id="userId"></user>`,
    controller: ($scope, $stateParams) => {
      $scope.userId = +$stateParams.userId;
    }
  })
  ...
  .state('user.tab1', {
    url: '/tab1',
    template: '<tab1 user="$ctrl.user"></tab1>',
    controller: ($scope, $state) => {
      //I would like to get access to the user object here
      let course = $scope.$ctrl.user;
    }
  });

再一次：用户对象不是加载到ui-router controller，而是加载到组件的控制器。该组件的模板嵌套在其中我想拥有用户对象。

Answer 1

我发现 ui-router不会为子状态创建孤立的范围，所以你可以通过

轻松访问它们

$scope.$ctrl.youparentproperty

在我的情况下是：

.state('user.tab1', {
  url: '/tab1',
  template: '<tab1 user="$ctrl.user"></tab1>',
});

如果有其他人在同一个问题上挣扎，那么

以及那个例子，https://plnkr.co/edit/9LSNtWWcom6ERZRBucXB?p=preview

Answer 2

您可以通过父属性指定州的父级。

.state('user', {
        url: '/user/:userId',
        template: `<user user-id="userId"></user>`,
        controller: ($scope, $stateParams) => {
          $scope.userId = +$stateParams.userId;
        }
      })
      ...
      .state('user.tab1', {
        url: '/tab1',
        parent: 'user',
        template: '<tab1 user="$ctrl.user"></tab1>',
        controller: ($scope, $state) => {
          //In order to access the scope of a parent controller in Angular UI Router use:
          let course = $scope.$parent.user;
        }
      });

另一个解决方案是将您的用户变量放入您可以在每个控制器中访问的服务或放入$rootscope。

将参数传递到ui-view

2 个答案: