Jose Cerejo Jose Cerejo - 1 month ago 9
AngularJS Question

ng-show and ng-hide doesn't work

My problem probably is simple. I want hide my intro section on all pages less at home.
The problem is that when you hide hiding on every page and when you show shows on every page. I plan to just hide in the home page "/".

html:

<!-- Intro Section -->
<section id="intro" class="intro-section" ng-show="home">
<div class="container">
<div class="row">
<a class="btn btn-default page-scroll scroll_btn floating" href="#slide">
<span class="glyphicon glyphicon-arrow-down"></span>
</a>
</div>
</div>
</section>


JS:

app.controller("employerCtrl", ["$scope", "$location", "$route", function($scope, $location, $route) {


var path = $location.path();
console.log(path);
$scope.home = true;
if(path === "/") {
console.log("Inside");
$scope.home = true;
} else {
console.log("Inside else");
$scope.home = false;
}


}]);

Answer

Take home as root scope and make it false in home controller and true in other controllers.

app.controller("homecontroller", ["$scope", "$location", "$route","$rootScope", function($scope, $location, $route,$rootScope) {
        $rootScope.home = false;
}]); 

app.controller("othercontroller", ["$scope", "$location", "$route","$rootScope", function($scope, $location, $route,$rootScope) {
        $rootScope.home = true;
}]); 


<section id="intro" class="intro-section" ng-show="home">
    <div class="container">
        <div class="row">
            <a class="btn btn-default page-scroll scroll_btn floating" href="#slide">
                <span class="glyphicon glyphicon-arrow-down"></span>
            </a>
        </div>
    </div>
</section>