0

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

arielorvits
  • 5,235
  • 8
  • 36
  • 61

2 Answers2

3

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

Andrei Cojea
  • 635
  • 6
  • 16
  • but what is the parent controller of the index? – arielorvits Jan 14 '15 at 18:24
  • i hava child controllers to the views, but not to the index.html – arielorvits Jan 14 '15 at 18:25
  • 1
    Look, in my example, the `` has a controller, right? When you're in home state, it has one controller, when you're in state1, it has another, and so on for all states you declare in the config. But, because it has a controller assigned to it, it also has a scope, so whatever you put inside that scope will be accessible only inside `` and not outside. In your case, the variable `home` needs to be in a scope, but that scope cannot be the scope of the `` because you need it outside of that element. – Andrei Cojea Jan 15 '15 at 07:42
  • 1
    That's why you need a parent controller, one that wraps the view and the top-bar and the bottom-bar. In my example, I assigned a parent controller for everything inside the html, but it's not necessarily to be like that. You can just wrap your code inside a `
    ` and put that `isHome` function inside it. Now that function is in a scope accessible to all 3 elements, top-bar & ui-view & bottom-bar.     – Andrei Cojea Jan 15 '15 at 07:47
  • 1
    I suggest taking it easy, you need to spend some time to learn the AngularJS basics. Try angular-route first, ui-router is more advanced and it will make your life harder if you're just learning. Good luck and be patient, I have one year experience with angular and I didn't learn over night. I didn't even use ui-router until recently. – Andrei Cojea Jan 15 '15 at 07:51
  • 1
    I learned a lot from this guy: https://egghead.io/technologies/angularjs?order=ASC – Andrei Cojea Jan 15 '15 at 08:01
  • At the end i use rootscope from othe controller what do you think about that? – arielorvits Jan 15 '15 at 09:12
  • 1
    It'll do the job, as $rootScope is a parent scope for all scopes, but it's considered to be bad practice :P – Andrei Cojea Jan 15 '15 at 09:30
-1

It is not easy to teach you everything in one go. You have to refer to few concept.

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

I hope this link will help you to getting started with Angularjs.

micronyks
  • 54,797
  • 15
  • 112
  • 146
  • SO answers should provide some feedback along with an explanation and then refer to an outside link. – Can May 19 '23 at 13:15