使用AngularJS按摩DOM

发布时间：2020-12-17 17:57:37 所属栏目：安全来源：网络整理

导读：我知道操纵DOM违反了Angular的规则,但在这种情况下,我已经横穿DOM来修改兄弟节点. 在jQuery中你可以这样做： $(本).parent()addClass( ‘加载.’). 在Angular中你会做这样的事情： angular.element(本).parent()addClass( ‘负载.’); 当然这不起作用,因为AP

我知道操纵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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!