Javascript 如何在ng单击后动态地将类添加到父元素中？

我有多个视频播放器在一个页面。如果使用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>

---

因为您的元素结构非常相似，所以可以创建一个具有隔离作用域的指令

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

angular.module（'media'，[]）
.指令（'mediaVideo'，函数（）{
返回{
模板：“”+
''+
''+
''+
'',
限制：“EA”，
替换为：“true”，
范围：{
iframeSrc:“=”
},
链接：功能（范围、元素、属性）{
},
控制器：功能（$scope）{
$scope.isActive=false；
}
};
});

我想我理解你的意图。它们都应该有自己的“active”类，因为jQuery中缺少的是“this”，如果这有意义的话。我需要在没有jQuery@JonEdwards的情况下实现它。我理解。如果您有isActive1和isActive2，并在ngClick中相应地设置它们，我认为它应该可以工作。