All geek questions in one place

Using ng-show with a controller

I wrote an HTML file that consists of a sidebar and a main container that maps to partial. Now that the partial download is loading based on the config route, I want the sidebar to hide from the browser. For this, I tried using ng-showa div in the sidebar.

Is the right approach to hide the div from the controller when the routes match? If so, how do I bind ng-showto the controller?

+4
source share
3 answers

What I usually do is this structure:

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

+4

$scope $location

function sideBarCtrl($scope, $location){}

$routeChangeSuccess $scope , , / , $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>
+2

. angular js .

ng-hide = true - ,

<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>
Hide result

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

Source: https://habr.com/ru/post/1533960/

More articles:


All Articles