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當前確切狀態

回答

相關問題