1

I haven't found, despite the many similar questions, how to hide a DOM element with ng-show in a parent scope from a child scope.

I've got two nested controllers. In the parent one (attached to ), I'm using the youtube embed directive to be able to read the video continuously despite changing views in ng-view.

<html ng-app="app" ng-controller="ParentCtrl">
  <body>
    <youtube-video id="player" ... ng-show="selectedVideo.showVideo"></youtube-video>
    <div ng-view></div>
  </body>
</html>

When I first reach a route defined in ngRoute, the parent controller methods are called and in both controller I can decide to show or hide the video with

$scope.selectedVideo.showVideo = true;

And the video is displayed or hidden as I wish.

However, when I use the back button, the parent controller methods are not called, but I call nevertheless 

$scope.selectedVideo.showVideo = false;

But the video still shows...

And at that point, when I refresh the page entirely (and manually...) the video finally gets hidden.

I'm not sure to understand why this is the case...

I basically would like to have some ngRoute views that display the video, and other which don't. That is, I would like the ng-show from the parent controller to be set to true/false from the child controller...

Any idea how can I achieve that?

I tried to use $scope.$parent with both an object as above and a primitive, but that didn't change a thing.

It's as the actual value used for ng-show is updated but ng-show being out of the ngView isn't refreshed...

scniro
  • 16,844
  • 8
  • 62
  • 106
user1144446
  • 561
  • 1
  • 4
  • 17
  • Can get a lot of information about current route by using routeChange events. Not clear what determines video state but sounds like a simple service combined with routeParams would help you a lot – charlietfl May 04 '15 at 18:11
  • How's routeChange linked to refreshing the Dom outside of the ngView? – user1144446 May 04 '15 at 19:12
  • can listen to routeChange outside of ngView. It's a broadcast from $rootScope. For example a navbar that is outside of ngView...can set active states using it – charlietfl May 04 '15 at 19:13
  • Ok I'll try, I asked because I didn't think that would be possible. Thanks I'll let you know – user1144446 May 04 '15 at 19:14
  • 1
    try `$scope.$on('$routeChangeSuccess', function(current){ console.log(current) })` in your outer controller – charlietfl May 04 '15 at 19:17
  • 1
    That worked thanks ;) Plus the fact that I had to wrap the youtubeEmbed directive into a div and use ng-if instead of ng-show. Maybe you could write your comments as an answer so that I can accept it? – user1144446 May 04 '15 at 21:48

1 Answers1

2

In the parent controller you can listen for all route changes using:

$scope.$on('$routeChangeSuccess', function(current){ 
    console.log(current) 
});

Then using the properties of the current route you should be able to manage your video player by setting the appropriate scope variables

charlietfl
  • 170,828
  • 13
  • 121
  • 150