Angular UI路由器ng-if当前确切状态

管理我的父母 - 子女状态时遇到问题，主要是因为我是ui-router的新手。但是，我已经完成了研究并找到了需要对路由进行硬编码但不是动态的解决方案。Angular UI路由器ng-if当前确切状态

我目前有：

<div> <!-- parent state --> 
    <div ng-if="'.' | isState"> 
     <!-- 
      background hierarchy that should be visible only when 
      parent state is active and not a child state of the parent 
     --> 
    </div> 
    <nav> 
     <a ui-sref="." ui-sref-active="active">Parent</a> 
     <a ui-sref=".child1" ui-sref-active="active">Child 1</a> 
     <a ui-sref=".child2" ui-sref-active="active">Child 2</a> 
    </nav> 
    <div ui-view></div> 
</div>

我试图完成？当父代加载时，我希望背景显示一些内容。它占据了整个屏幕。 ui-view不会占用整个屏幕。因此，当路线与父母的状态不完全匹配时，我希望隐藏或移除背景元素（如果父母的路线是/root/parent，我希望背景仅在状态恰好为/root/parent而不是/root/parent/child1时可见）。

我能够实现我想要的只有当我提供确切的预期路线。例如ng-if="'root.parent' | isState"。

此外，ui-sref-active="active"保留active类显示子视图时（这是预期的，但我希望班级只有在路线完全匹配时才有效）。

但是，我不认为这是很好的父母路线的硬编码视图。我只是想让它匹配它所属的任何路线。因此，如果我稍后决定将其移至/root/parent/car，则不必更新ng-if和ui-sref-active以反映更改。

有没有人遇到问题，并能够解决它？

来源

2017-03-23 DraganTL

你有父母子女等级的原因是什么？ – arqam

从子路径'Child 1'中删除'active'类并将'css'添加到'active'类，以便它只出现在背景中。 – Sravan

@arqam页面的主要内容实际上显示为背景，并且子项包含可隐藏的可选内容。 – DraganTL

感谢您的答复，但我寻求的解决方案中的一个条件是试图避免硬编码状态。我的解决方案如下：

对于导航链接，我不得不读的UI路由器指令代码找到ui-sref-active-eq指令，我在下面的方式应用：

<nav> 
    <a ui-sref="." ui-sref-active-eq="active">Parent</a> 
    <a ui-sref=".child1" ui-sref-active="active">Child 1</a> 
    <a ui-sref=".child2" ui-sref-active="active">Child 2</a> 
</nav>

该指令确保Parent链接仅在URL完全等于父母的URL时才有效。

至于显示/隐藏背景，我有以下代码。此外，请注意，在两种情况下做我硬编码的状态名称：

function ParentController ($scope, $state, $stateParams, $q) { 
    var model = this; 
    var controllerState = $state.current.name; 

    $scope.showBackground = true; 

    $scope.$on('$stateChangeSuccess', onStateChange); 

    init(); 

    function init() { 
     onStateChange(); 
    } 

    function onStateChange() { 
     $scope.showBackground = $state.is(controllerState); 
    } 
}

然后在视图：

<div ng-if="showBackground"> 
    <!-- 
     background hierarchy that should be visible only when 
     parent state is active and not a child state of the parent 
    --> 
</div>

来源

2017-03-23 20:01:38 DraganTL

使用$state.current.name你的病情

<div ng-if="$state.current.name === 'state1'"> 

</div>

来源

2017-03-23 06:28:54

这可以通过几种方式来完成，因为你可能有一个单独的parentController。

可以在控制器检查状态，并使用ng-if

控制器防止它的观点：

app.controller('myCtrl', function($scope,$state) { 
    if($state.current.name == 'your parentstate') 
     { 
      $scope.stateName = true; 
     } 
    else 
     { 
      $scope.stateName = false; 
     } 

});

查看：

<div ng-if="stateName"> 
    // this only executes if current stateName is parent state 
</div>

以上只执行，如果当前stateName是父状态

或者，

你可以简单地删除子路由active class，

<a ui-sref=".child1">Child 1</a> 
<a ui-sref=".child2">Child 2</a>

现在，添加CSS到活动类，以便它仅出现在后台的父母。

来源

2017-03-23 06:42:31 Sravan

@DraganTL，请检查我的答案。 – Sravan

对不起，这不涉及OP中的一个部分，我不想对一个状态（自己或父母）进行硬编码。我刚刚解决了这个问题，并会发布我的解决方案。 – DraganTL

最简单的办法是检查控制器的状态和做什么你需要做

app.controller('appCtrl', function($scope, $state) { 
    if ($state.is('my-active-state')) { 
     // do stuff when the state is active 
    } else { 
     // do stuff when the state is NOT active 
    } 
});

查看Docs了解更多信息。

来源

2017-11-30 12:13:10 Ferie

Angular UI路由器ng-if当前确切状态

回答

相关问题