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

Question

我有这个代码用于我的$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 选择父节点中的一个节点：

1. 通过单击

   • 我在父控制器中创建了一个单击功能来设置parentCtrl.idSelect = node.id
   • 并使用$state.go()
   • 所以它奏效了

2. 通过刷新

   • 因此，当它进入路径 /app/1/2 的状态时，它会选择id 为 2 的节点。
   • 如何？

---

好吧，我找到了一个解决方案...我只是不知道是否是一个好的...

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

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

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

Answer 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路由器示例应用程序及其来源。它包含许多有用的技巧。