单击除其他元素以外的其他元素时隐藏视频

Question

当displayVideo属性为true时，我使用名为load-video的指令在DOM中load-video 。

  <figure id = "positionVideo" ng-show = "displayVideo">
    <load-video></load-video>
  </figure>

loadVideo指令：

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

              link: function(scope, element) {
                element.data('loadVideo',true);

                angular.element($document[0].body).on('click',function(e) {
                  var inElem =  angular.element(e.target).inheritedData('loadVideo');
                  if (inElem) {
                    scope.displayVideo = true;
                  } else {
                    scope.displayVideo = false;
                  }
               })
             }
           };
          });

video.html

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

figure标签可以访问此控制器：

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

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

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

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

我不明白为什么将displayVideo属性更改为false时video元素没有隐藏。

我在下面提供我的整个应用程序的上下文：

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

      <figure id = "positionVideo" ng-show = "displayVideo">
        <load-video></load-video>
      </figure>

      <summary ng-controller = "buttonViewCtrl">
        <button type="button" ng-hide = "buttonDisplay" ng-show = "!displayVideo" class="btn btn-default btn-lg navButton" aria-label="Center Align"  ng-click="nav()">
          <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
        </button>

        <button type="button" class="close" data-dismiss="alert" aria-label="Close" id = "closeButton" ng-show = "buttonDisplay" ng-hide = "!displayVideo" ng-click = "closeNav(); closeVideo()"><span aria-hidden="true">&times;</span> </button>

        <div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade">
          <navigate></navigate>
        </div>
    </summary>

    <main ng-controller="ScrollCtrl">
      <div id = "arrow">
        <img src = "images/pointer.png" alt = "arrow" ng-click="gotoElement('panda')">
      </div>
    </div>

    <div class = "panda" id = "panda">
      <button type="button" class="btn btn-default btn-lg work"> SEE OUR WORK </button>
    </div>
    <main>

    <div class = "experience">
      <h1> Our team builds great brands and experiences. </h1>
      <button type="button" class="btn btn-default btn-lg team"> MEET THE TEAM </button>
    </div>

    <section class = "about">
      <h5> WHAT ARE WE? </h5>
      <h2> Anchour is a branding agency based in Maine. </h3>

      <p> We weave together creative solutions to build personal brands and experiences. We work closely with your brand to understand your needs and create solutions that produce real results. By integrating the power of identity, digital, and sensory design, we bring new life to brands everywhere.
      </p>
    </section>

    <div class = "goodWork">
      <div class = "spotlight"> 
        <h3> <a href = "#"> Spotlight: Amanda Brill of Las Vegas </a> </h3>
        <p> Amanda Brill is a Designer at Anchour. Fueled by the purpose of helping others, she works to bring the identity of a brand to life through a creative and intensive design process. to help brands effectively communicate who they she works to bring the identity of a brand to life through a creative... </p>
        <footer> <a href = "#"> Read More </a> </footer>
      </div>

      <div class = "spotlight"> 
        <h3> <a href = "#"> Spotlight: Amanda Brill of California </a> </h3>
        <p> Amanda Brill is a Designer at Anchour. Fueled by the purpose of helping others, she works to bring the identity of a brand to life through a creative and intensive design process. Her goal is to use design as a way to help brands effectively communicate who they sponsor and supporter Fueled by the purpose of.. </p>
        <footer> <a href = "#"> Read More </a> </footer>
      </div>

      <div class = "spotlight"> 
        <h3> <a href = "#"> Varney Agency: Protecting What You </a> </h3>
        <p> Anchour produced Varney Agencys latest spot featuring Matt Albrecht, owner of River Drive. Working with companies from all around the world, River Drive buys, sells, reconditions and recycles reconditions and ecycles owner of used. River Drive buys, sells Varney Agencys latest spot featuring Matt Albrecht.</p>
        <footer> <a href = "#"> Read More </a> </footer>
      </div>

      <div class = "spotlight"> 
        <h3> <a href = "#">Announcing support of Not Here </a> </h3>
        <p> This week is Human Trafficking Awareness Week, so it’s great timing to share how proud we are to be a sponsor and supporter of Not Here latest spot featuring Matt Albrecht, reconditions and recycles owner of River Drive. Working with companies from all around the,a River Drive buys, sells.... </p>
        <footer> <a href = "#"> Read More </a> </footer>
      </div>
    </div>

    <div class = "start">
      <h2 id = "startWork"> Want to work with us? </h2>
      <button type="button" class="btn btn-default btn-lg"> Get Started &#x2192; </button>
    </div>

    <div id = "end">
      <footer>
        <a href = "#/home"> Home </a>
        <a href = "#"> About us </a>
        <a href = "#"> Our Team </a>
        <a href = "#"> Blog </a>
        <a href = "#"> Services </a>
        <a href = "#"> Portfolio </a>
        <a href = "#"> Contact </a>
        <a href = "#"> Sitemap </a>
    </footer>

    </div>
  </div>

Answer 1

由于Angular不知道模型已更改，因此视频没有隐藏。 实际上， element.on()只是函数on的普通jQuery，它不支持Angular。

您可能已经注意到，当您在外部单击然后在内部单击时，视频消失了：这是因为首先触发的ng-click处理程序是最内层的侦听器，它为您触发了摘要阶段，从而使ng-hide更新了视图。

处理此问题的正确方法是$scope.$apply() ：

var body = angular.element($document[0].body);
body.on('click',function(e) {
    scope.$apply(function() {
        var inElem = angular.element(e.target).inheritedData('loadVideo');
        console.log(inElem);
        if (inElem) {
            scope.displayVideo = true;
        } else {
            scope.displayVideo = false;
            jQuery("#playVideo").get(0).pause();
        }
    });
});

看到这个小提琴 。