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选择父节点：

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

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

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

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

加载子状态

1 个答案: