how to hide and show sidenavigation panel in AngularJs?

Question

I have used ng-include for adding html, In included html i have side navigation panel include,This side navigation include i want to show in one html and not in second html , how i can do it ?

MY include

<div ng-include src="'template/includeGallery.html'"  id="angularGallery" ng-controller="galleryCtrl as vm"  
                ng-show="vm.showGallery" resize>
</div>

includeGallery.html as

<div class="gallery">
                <div class="close" ng-click="vm.closeGallery()">
                    <img src="../images/closeimage.png" class="close-img">
                </div>
                <!-- Gallery start -->  

               <div  ng-include src="'view/sidepanel.html'">
          </div>
 </div>

In above code i want to show ng-include src="'view/sidepanel.html'"> in one html page and i dont want want show in second html both have different controller .

Both html have different controller .

Answer 1

You have to use ng-show here :

Initialize one status variable from controller to ensure that you want to show or not.

$scope.status = true;

Then in your view :

<div ng-show="status" ng-include src="'template/includeGallery.html'"  id="angularGallery" ng-controller="galleryCtrl as vm"  
                ng-show="vm.showGallery" resize>
</div>

Answer 2

In the controller where you don't want to include the file, take a flag , make it true and add ng-if condition where you are including the partial,

app.controller('myController', ['$scope',
    function($scope) {

    vm.to_display = true;

    }

])

includeGallery.html as

<div class="gallery">
                <div class="close" ng-click="vm.closeGallery()">
                    <img src="../images/closeimage.png" class="close-img">
                </div>
                <!-- Gallery start -->  

               <div  ng-if = "vm.to_display" ng-include src="'view/sidepanel.html'">
          </div>
 </div>