angularjs - 使用 AngularJS 按摩 DOM

Question

我知道操作 DOM 违反了 Angular 的规则，但在这种情况下，我不得不横向操作 DOM 来修改同级节点。

在 jQuery 中，您可以执行以下操作:

$(this).parent().addClass('.loading');

在 Angular 中，你会做这样的事情:

angular.element(this).parent().addClass('.loading');

当然这不起作用，因为 API 上没有 parent() 方法或 addClass() 方法支持。

这让我想到了一个问题，我还能如何做到这一点？

谢谢!

Answer 1

默认情况下，Angular 元素用 jqLit​​e 包装(Angular 自己的 jQuery 实现)。如果您已将 jQuery 添加到您的项目中，则元素将使用完整的 jQuery 进行包装。

这是 jQuery lite http://docs.angularjs.org/api/angular.element 可用的方法列表

如您所见，您可以访问 parent() 和 addClass() 因此，无需添加 jQuery 作为依赖项，您就可以获得大量 DOM 操作能力。

-*-

使用 angular 操作 DOM 完全没问题，最佳实践是从指令中进行操作，这里有一个元素可以访问父元素的小例子

HTML

<div ng-app='app'>
    <div id="someparent">
        <div my-directive>
        </div>
    </div>
</div>

在你的 JS

var app = angular.module('app', []);


app.directive('myDirective', function(){
    return{
        restrict: 'A',
        link: function(scope, element, attributes){
            console.log(element.parent().attr('id'));  // "someparent"
            element.parent().addClass('loading');    // adding loading class to parent
        }
    };
});​​​​​​​​​​​​​

jsfiddle: http://jsfiddle.net/jaimem/Efyv4/1/

当然，在构建应用程序时，您可能希望指令仅操作自身内部的元素。

-*-

此外，正如 Mark 提到的，您可以使用 angular 的现有指令，例如 ngClass 而不是创建自己的指令。目前尚不清楚您想要实现的目标，但我建议您查看 ngCloak 。