javascript - 如何在 ng-click 之后动态添加类到父元素？

Question

我在单个页面中有多个视频播放器。如果我使用 jQuery，则很容易动态地找到父元素。但在 Angularjs 中它不会发生。

    <div class="item-media video-item" ng-class="{'active': isActive}">
         <iframe src="https://www.youtube.com/embed/gvI2ClWqHO0" frameborder="0" width="100%" height="250"></iframe>
         <img src="img/thomas-theatrics.jpg" alt="">
         <div class="play-icon" ng-click="isActive = !isActive"><img src="img/play-icon.png" alt="" class="custom-icon"></div>
    </div>

<div class="item-media video-item" ng-class="{'active': isActive}">
         <iframe src="https://www.youtube.com/embed/gvI2ClWqHO0" frameborder="0" width="100%" height="250"></iframe>
         <img src="img/thomas-theatrics.jpg" alt="">
         <div class="play-icon" ng-click="isActive = !isActive"><img src="img/play-icon.png" alt="" class="custom-icon"></div>
    </div>

Answer 1

因为您的元素结构非常相似，所以您可以制作一个具有独立作用域的指令。

angular.module('media', [])
.directive('mediaVideo', function() {
  return {
    template: '<div class="item-media video-item" ng-class="{'active': isActive}">'+
         '<iframe ng-src="{{ iframeSrc }}" frameborder="0" width="100%" height="250"></iframe>'+
         '<img src="img/thomas-theatrics.jpg" alt="">'+
         '<div class="play-icon" ng-click="isActive = !isActive"><img src="img/play-icon.png" alt="" class="custom-icon"></div>'+
         '</div>',
    restrict: 'EA',
    replace: 'true',
    scope:{
        iframeSrc: '='
    },
    link: function(scope,element,attributes){
    },
    controller: function($scope){
        $scope.isActive = false;
    }
  };
});