单击父级时AngularJS隐藏嵌套元素

Question

我有以下标记：

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

这些是控制器：

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();
          }
      };

   }
]);

这是loadVideo 指令：

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

这是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>

我的问题是当我点击视频时它被隐藏了，但我希望它在点击父 div firstView 时隐藏。

更新

问题是因为我没有停止对孩子的事件传播而引起的。以下是完美运行的代码。

html: menuCtrl 不是必需的。

<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 控制器：

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

更新 2

我刚刚注意到我不需要初始化新变量menu 或创建函数menuClose。我重用了函数closeVideo 和变量displayVideo 来实现相同的功能。我重构了我的代码如下：

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

closeVideo in watchVideo 控制器：

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

Answer 1

您可以在父 div 上添加 ng-click 并将菜单变量设置为隐藏。无需在控制器中添加自定义 javascript。

<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>