0

I have the following markup:

<div class="firstView" ng-controller = "watchVideo">
      <figure id = "positionVideo" ng-controller = "MenuCtrl" ng-hide = "!menu" ng-show = "displayVideo">
        <load-video></load-video>
      </figure>
</div>

These are the controllers:

angular.module('homePage').controller('watchVideo',  ['$scope', '$location', function($scope, $location) {
    $scope.displayVideo = false;

    $scope.videoAvailable = function () {
      $scope.displayVideo = true;
      console.log("videoAvailable");
    };

    $scope.closeVideo = function() {
        $scope.displayVideo = false;
        console.log("closeVideo");
    };

    $scope.playIt = function() {
        if (jQuery("#playVideo").get(0).paused) {
            jQuery("#playVideo").get(0).play();
        }
        else {
            jQuery("#playVideo").get(0).pause();
        }
    }
}])

.controller('MenuCtrl', ['$scope', '$location', '$rootScope',

  function($scope, $location, $rootScope) {
    $scope.menu = false;

    $scope.menuOpen = function() {
        $scope.menu = true;
    }

    jQuery(".firstView").get(0).onclick = function() {
          if ($scope.menu) {
              console.log("window");
              $scope.menu = false;
              jQuery("#playVideo").get(0).pause();
              $scope.$apply();
          }
      };

   }
]);

This is the loadVideo directive:

angular.module('homePage')
  .directive('loadVideo', function($document, $window) {
    return {
      templateUrl: 'partials/video/video.html'
    }
})

This is video.html:

<video height = "50%" width = "150%"  id = "playVideo" ng-click="playIt(); menuOpen()" poster = "images/eagle.jpg" controls>
          <source src = "images/lion.mp4" type = "video/mp4">
 </video>

My problem is the video is being hidden when I click on it, but I want it to hide when the parent div firstView is clicked on.

UPDATE

The problem was being caused because I was not stopping event propagation on the child. Following is the code that works perfectly.

html: menuCtrl was not required.

<div class="firstView" ng-controller = "watchVideo" > 
      <figure class="logo" ng-controller = "logo" ng-click="goToUrl('/home')"> </figure>

      <cite>Every brand has a story.</cite>
      <h2 id = "h2Heading"> <a ng-click = "videoAvailable()">Watch the video </a></h2>
      <aside> &#x2192; </aside>

      <div id = "positionVideo" ng-click = "menuClose()" ng-show = "displayVideo" ng-hide = "!menu">
        <load-video></load-video>
    </div>
</div>

video.html:

<video ng-click="$event.stopPropagation(); playIt()" height = "75%" width = "75%"  id = "playVideo" poster = "images/eagle.jpg" controls>
          <source src = "images/lion.mp4" type = "video/mp4">
 </video>

menuClose in watchVideo controller:

 $scope.menuClose = function() {
          $scope.menu = false;
          console.log($scope.menu);
          jQuery("#playVideo").get(0).pause();
    }

UPDATE 2

I just noticed that I did not need to initialize the new variable menu or create the function menuClose either. I reused the function closeVideo and variable displayVideo to achieve the same functionality. I refactored my code as follows:

<div id = "positionVideo" ng-click = "closeVideo()" ng-show = "displayVideo">
        <load-video></load-video>
    </div>

closeVideo in watchVideo controller:

$scope.closeVideo = function() {
        $scope.displayVideo = false;
           jQuery("#playVideo").get(0).pause();
    };

1 Answers1

0

You can add ng-click on your parent div and set the menu variable to hide. No need to add custom javascript in your controller.

<div class="firstView" ng-controller = "watchVideo" ng-click="menu=false" ng-init="menu=true" ng-hide = "!menu">
  <figure id = "positionVideo" ng-controller = "MenuCtrl"  ng-show = "displayVideo">
    <load-video></load-video>
  </figure>

Shadi Hariri
  • 197
  • 16
  • I tried the following, but it does not work. `
    `
    I changed my controller as follows:`$scope.menuClose = function() { $scope.menu = false; }`     –  Aug 04 '15 at 04:19
  • I think the problem is that you use the menu which is defined in child controller in the parent controller. you can change controller places and whenever you need to access your parent variables you simply need to access that by parent.YourVariable – Shadi Hariri Aug 04 '15 at 04:29
  • You can use this answer if it helps: (http://stackoverflow.com/questions/13428042#answer-28374175) – Shadi Hariri Aug 04 '15 at 04:34
  • I added the `menuClose` function in the `watchVideo` controller not the `menuCtrl` –  Aug 04 '15 at 04:39
  • does the child `div` disappears? Cuz I forgot to mention that you should add `ng-hide = "!menu"` to the `
    `
     – Shadi Hariri Aug 04 '15 at 05:02
  • Also `ng-init="menu=true"` – Shadi Hariri Aug 04 '15 at 05:15
  • I figured it out. Thanks. Now the problem I am having is when I click on the `div` the video closes, but when I click on the video instead of it pausing or playing (depending on its current state), it closes because it is part of the parent div. –  Aug 04 '15 at 05:15
  • I updated the answer (still using simpler method with no JS). please do look at it..It has some more explaination..please to mark it correct with upvote..Thanks :) – Shadi Hariri Aug 04 '15 at 05:34
  • That was very helpful, but it still does not solve my question. Unless I do not click on the play button the video is not playing. It is hiding the video because the `video` element is the child of the `div` which is being clicked on. Is there a way to exclude the child element from the parent when using ng-click? –  Aug 04 '15 at 05:47
  • Ok I think here you should play with variables. In your child div you can add `ng-click="childClick()"` and set the menu to true while you can set a flag to true. and In your parent you can make menu=false with the condition of the flag to be false. i'm working on some JSFiddle for the answer. – Shadi Hariri Aug 04 '15 at 05:57
  • This JSFiddle is similar to what you want, I hope it helps you (http://jsfiddle.net/DrStein/bxw7rg0q/) – Shadi Hariri Aug 04 '15 at 07:59