使用AngularJS按摩DOM

我知道操纵DOM违反了Angular的规则,但在这种情况下,我已经横穿DOM来修改兄弟节点.

在jQuery中你可以这样做：

$(本).parent()addClass( ‘加载.’).

在Angular中你会做这样的事情：

angular.element(本).parent()addClass( ‘负载.’);

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

这让我想到了这个问题,我怎么能做到这一点呢？

谢谢！

解决方法

Angular元素默认用jqLit​​e包装(Angular自己的jQuery实现).如果您已将jQuery添加到项目中,则元素将使用完整的jQuery包装.

以下是jQuery lite http://docs.angularjs.org/api/angular.element提供的方法列表

正如您所看到的,您可以访问parent()和addClass()因此您可以获得大量的DOM操作功能,而无需添加jQuery作为依赖项.

– * –

用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.