javascript - 加载子状态时修改父 Controller 状态

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;
      }
    }
  })

在父 View 中，我有一个 TreeView ，在 subview 中，我有有关在父 View 的 TreeView 中选择的节点的信息。节点的id是$stateParams.idChild

显示我使用的选定节点

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

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

1. 点击

   • 我在父 Controller 中创建了一个点击函数来设置parentCtrl.idSelect = node.id
   • 并使用$state.go()
   • 这样就成功了

2. 通过刷新

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

<小时/>

好吧，我找到了解决方案......只是不知道好不好……

我在子 Controller 中创建一个激活函数并调用

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

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

有没有办法不使用$scope？使用子 Controller 修改父 Controller 的状态似乎是错误的。对吗？

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-router sample application它是 sources 。它包含许多有用的技巧。