在控制器中使用ng-show

我寫了一個HTML文件，它由一個側欄和一個映射到部分的主容器組成。現在，當部分基於配置路由加載時，我希望側欄從瀏覽器隱藏。爲此，我嘗試在側欄div上使用ng-show。在控制器中使用ng-show

當路線匹配時，是否正確隱藏控制器的div？如果是這樣，我如何將ng-show綁定到控制器上？

2014-03-28 Pradeep

我最常做的是這樣的結構：

<nav ng-show="sidebar.show" id="sidebar" ng-controller="sidebarController"> 
    [...] 
</nav> 
<div ng-view> 
</div>

因此，側邊欄有自己的控制器（和它自己的範圍內）;那麼在部分控制器內部，您可以考慮更改sidebar.show的值。例如：

// sidebarController 
function sidebarController($rootScope, $scope){ 
    $rootScope.sidebar = { 
    show : true; 
    }; 
    $scope.sidebar = $rootScope.sidebar; 
} 

// partialController 
app.controller("partialController", function($rootScope, $scope) { 
    $rootScope.sidebar.show = false; 
});

但是，這只是一個辦法做到這一點。

PS：ng-show只是隱藏了元素，但它仍然會在DOM中;我通常更喜歡ng-if，因爲它不會將元素添加到DOM。

來源

2014-03-28 18:19:43 Polmonite

如何使用ng-if？我應該用ng-if替換ng-show嗎？ – Pradeep

ng-if文檔可以在這裏找到：http://docs.angularjs.org/api/ng/directive/ngIf;你可以用ng-if替換ng-show，它應該沒有問題。 – Polmonite

我會爲你的側邊欄控制器和$範圍和$位置注入

function sideBarCtrl($scope, $location){}

然後，我會聽$在$範圍routeChangeSuccess並基於新的路徑，你可以決定是否顯示/隱藏基於在$位置

$scope.show = true; // or false 
$scope.$on('$routeChangeSuccess', function(){ 
    // logic here to show/hide based upon $location.path() 
    var path = $location.path(); 
    if (path === 'somePathToShow'){ 
     $scope.show = true; 
    } else if (path === 'somePathToHide') { 
     $scope.show = false; 
    } 
});

而且每個請求定義的路徑側邊欄，您的標記會是這個樣子。

<body> 
    <div ng-controller="SideBarCtrl" ng-show="show"> 
     <!-- sidebar content --> 
    </div> 
    <div ng-view></div> 
</body>

來源

2014-03-28 19:27:56 Brocco

什麼應該在UI上編碼。應該在UI上顯示/隱藏div的指令是什麼？ – Pradeep

@ user883561我用標記和一些額外的邏輯更新了我的答案，以更好地說明解決方案 – Brocco

感謝brocco :-) – Pradeep

大多數情況下我們需要隱藏和顯示UI組件。在角js它非常容易。

使用NG隱藏=真實 - 是指令，檢查它的布爾

<div ng-app="" ng-controller="MyController"> 
 
<div > 
 
\t <button name="click" ng-click="click()">Show Donet Chart</button> 
 
</div> 
 
<div class="bg-primary" ng-hide="titleEnabled"> 
 
\t <span class="glyphicon glyphicon-stats"></span>Title 
 
</div> 
 
<div ng-hide="divEnabled"> 
 
    ------------ 
 
</div> 
 
</div>

這是控制器

function myController($scope){ 
 
    $scope.titleEnabled = true; 
 
    $scope.divEnabled = true; 
 
    
 
    $scope.click = function(){ 
 
    $scope.titleEnabled = false; 
 
    $scope.divEnabled = false; 
 
    } 
 
}

來源

2015-02-05 11:57:16

在控制器中使用ng-show

回答

相關問題