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

无需使用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

Answer 2

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

AngularJS / jQuery“parent（）”选择FF中的不同元素而不是Chrome和Safari，为什么？

2 个答案: