Question

我编写了一个HTML文件，其中包含一个侧边栏和一个映射到局部的主容器。现在，当基于配置路由加载部分时，我希望侧边栏从浏览器中隐藏。为此，我尝试在侧边栏div上使用ng-show。

当路线匹配时，从控制器隐藏div是否正确？如果是这样，我如何将ng-show绑定到控制器？

Answer 1

我通常做的是这样的结构：

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

所以，侧边栏有自己的控制器（它自己的范围）;然后在partial的控制器内部，您可以考虑更改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。

Answer 2

我会为侧边栏创建一个控制器并注入$ scope和$ location

function sideBarCtrl($scope, $location){}

然后我会在$ scope上监听$ routeChangeSuccess并根据新路径，你可以根据$ location上定义的路径确定是否显示/隐藏你的侧边栏

$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>

Answer 3

我们需要隐藏和显示UI组件的大多数情况。在角度js中它很容易。

使用ng-hide = true - 是指令，它检查布尔值

＆＃13;

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

＆＃13;

这是控制器

＆＃13;

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

＆＃13;

使用ng-show和控制器

3 个答案: