AngularJS / jQuery“parent()”在 FF 中选择的元素与在 Chrome 和 Safari 中不同，为什么？

Question

我在 AngularJS/Firefox 中发现了一个奇怪的怪癖，其中选择器使用抓取不同的元素。我已经把它放在一个 Plunker 中来展示它的效果：

http://plnkr.co/edit/H7stCpQE59i0aUlQ865j?p=preview

在 Chrome 中打开它并单击按钮。你实际上是在选择一个隐藏的 <input> 元素，然后 Angular 传递它的事件/父元素，获取父元素 <button> 并向其添加类 .active，如下所示：

$scope.selectTag = function($event){
        var elem = angular.element($event.srcElement).parent();
        if(elem.hasClass('active')){
            elem.removeClass( "active" );
        }else{
            elem.addClass('active');
        }   
    }

不过，在 Firefox 中，它选择 <input> 元素并将 .active 添加到该元素，而不是作为其父元素的 <button>。

关于为什么会发生这种情况的任何想法？

Answer 1

正如 Arun P Johny 的评论，使用 $event.target 而不是 srcElement。但是，在使用 Angular JS 时，您不应该像那样操作 DOM。相反，您可以使用 ng-class 来执行此操作。

<label class="btn btn-default" ng-class="foo">
  <input class="" ng-click="foo=(foo==='active') ? '' : 'active'" type="checkbox" />
    Button Text
</label>

Answer 2

无需使用 jQuery。只需使用ng-class。以下需要控制器中的零代码来完成您的代码最终将执行的操作。控制器中也不应该有任何 DOM 操作代码

<label class="btn btn-default" ng-class="{active:btn_active}" >
  <input class="" ng-click="btn_active=!btn_active" type="checkbox" />
    Button Text
</label>

在使用 jQuery 方法之前先学习寻找角度方法！

DEMO