加载子状态时修改父控制器状态答案

【问题标题】：Modify parent controller state when loading child state加载子状态时修改父控制器状态
【发布时间】：2016-01-13 23:35:31
【问题描述】：

我的$stateProvider 有这个代码

.state('app.parent', {
    url: '/app/:idParent',
    controller : "ParentController",
    resolve: {
      idParent : function($stateParams){
        return $stateParams.idParent
      }
    }
  })
  .state('app.parent.child', {
    url: '/:idChild',
    resolve: {
      idChild : function($stateParams){
        return $stateParams.idChild;
      }
    }
  })

在父视图中我有一个树视图，在子视图中我有关于在父树视图中选择的节点的信息。节点的 id 是 $stateParams.idChild

为了显示我使用的选定节点

ng-class="{'bg-gray' : parentCtrl.idSelected == node.id}"

我想根据路径idChild在父节点中选择一个节点：

点击
- 我在父控制器中创建了一个点击函数来设置parentCtrl.idSelect = node.id
- 并使用$state.go()
- 所以它起作用了
通过刷新
- 因此，当它到达路径 /app/1/2 的状态时，它会选择 id 为 2 的节点。
- 怎么样？

嗯，我找到了解决办法... 就是不知道好不好...

我在子控制器中创建了一个激活函数并调用了

function ChildController($scope, idChild) {
    activate();

    function activate(){
        $scope.parentCtrl.idSelected = idChild;
    }
}

有没有不使用 $scope 的方法？使用子控制器修改父状态似乎是错误的。对吧？

【问题讨论】：

在您的子视图控制器中，您可以同时注入idParent 和idChild。只需注入它们并像你一样使用。我看不出你的问题有什么问题。你究竟不能做什么？显示更多代码。
我没有子控制器。我可以。但是父控制器具有操作树视图的逻辑。不是子控制器。
嗯.. 那么为什么你有子状态呢？您可以使用url: '/app/:idParent/:idChild' 作为您的父网址。
因为它有一个子状态。 /app/:idParent -> 显示根信息 /app/:idParent/:idChild -> 显示节点信息当我输入 /app/:idParent 我希望能够编辑根信息。当我输入/app/:idParent/:idChild 时，我希望能够编辑节点信息，哪些视图和状态与 root 不同。
如果我理解正确，您的问题是在父视图中突出显示与当前子视图相对应的树视图节点？如果是，那么您可以定义子状态的控制器，将idChild 注入其中并执行$scope.parentCtrl.idSelect = idChild 之类的操作。但是这种方法依赖于我不喜欢的范围继承。

标签： javascript angularjs treeview angular-ui-router

【解决方案1】：

如果您只需要在父状态下突出显示活动项目，那么您可以像这样使用ui-sref-active

    <!-- This <li> will only add the 'bg-gray' class if 'app.parent.child' or its descendants are active
         AND if it is the link for the active child (aka idChild) -->
    <li ng-repeat="node in nodes" ui-sref-active="bg-gray">

      <!-- Here's a ui-sref that is also providing necessary parameters -->
      <a ui-sref="app.parent.child({idChild:node.id})">{{node.name}}</a>
    </li>

在这种情况下，您根本不需要点击处理程序。一旦激活子状态，就会添加该类。

我还建议你查看这个官方的 ui-router sample application，它是 sources。它包含许多有用的技巧。

【讨论】：