element.addClass() AngularJS 对比 JQuery

Question

我创建了 this plunker 来检查一个奇怪的行为：尝试执行

element.addClass('someclass')

app.directive('svgElement', function () {
return {
  restrict: 'AE',
  replace:true,
  template:
    '<svg height="100" width="100">' +
    '<circle class="chart__circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />' +
    '</svg>',
  scope: {
  },
  link: function (scope, element, attrs) {
    var children = element.children();
    var circle = angular.element(children[0]);
    circle.addClass("selected");
  }
}});

在指令中的 link 函数中，该函数已执行但没有任何反应。
在示例 plunker 中，这是有效的，我明白了原因：它没有导入 JQuery.

在我的项目中，脚本部分是：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
...

如果我删除 JQuery 依赖项，它就会起作用。请问为什么会这样，如何解决保持JQuery的问题？提前致谢！

Answer 1

jQuery.fn.addClass 的实现不允许设置 classes 的 SVG 元素。它 reads/sets className 属性与相同的 HTMLElements 属性不同。然而 jqLite（AngularJS addClass 更简单的版本）没有这个问题，因为它处理 class 属性，而不是属性.

要在项目中继续使用 jQuery 时避免出现问题，请避免使用 addClass 方法并使用 setAttribute 方法设置 class。

var circle = angular.element(children[0])[0];
var oldClass = circle.getAttribute('class');
circle.setAttribute('class', oldClass + ' selected');

演示： http://plnkr.co/edit/rs7bDpzHEJUF6itU8A7a?p=preview

其他替代方法是使用 Element.classList API (IE10+):

var circle = angular.element(children[0])[0];
circle.classList.add('selected');

演示： http://plnkr.co/edit/wZfzKeCUB9EOzK6ESCok?p=preview

element.addClass() AngularJS 对比 JQuery

element.addClass() AngularJS vs JQuery

jquery

element

angularjs

angularjs-directive