javascriptangularjsuiviewng-hidejs-routes

how can I use ng-if based on url in the index.html page?

I want to use ng-hide in the index page if the url in some nested views. in my index.html, I want something like:

    <top-bar ng-if="!home"></top-bar>
    <ui-view class="reveal-animation"></ui-view>
    <bottom-bar ng-if="!home"></bottom-bar>

I want that when I enter to "home" view the bars will disappeared. as I saw here in same questions - the answer was to use $location in the controller, but where is the controller of the index page?

thanks

Solution

  • In a parent controller, add the following:

    $scope.isHome = function(){
  return $state.is("home");
}

    Then change your template like this:

    <top-bar ng-if="!isHome()"></top-bar>
<ui-view class="reveal-animation"></ui-view>
<bottom-bar ng-if="!isHome()"></bottom-bar>

    Check this plunkr here to see some live code.

    Another method would be using $stateChangeSuccess, something like this:

    $scope.$on("$stateChangeSuccess", function(event, toState){
  $scope.isHome = (toState.name == "home")
})

    I also recommend checking out $state.includes, $state.current and others. Just get through the documentation here