使用AngularJS按摩DOM

时间:2012-11-12 02:12:33

标签: angularjs

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

在jQuery中你可以这样做:

$(本).parent()addClass( '负载。');

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

angular.element(本).parent()addClass( '负载。');

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

这让我想到了这个问题,我还能怎样做到这一点?

谢谢!

2 个答案:

答案 0 :(得分:8)

默认情况下,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

答案 1 :(得分:3)

在jQuery中,我们经常会有一些事件触发器,然后从触发事件的元素中,我们遍历DOM以找到一些其他元素然后被操纵。例如,你的例子:

// some event causes this code to execute:
$(this).parent().addClass('.loading');

在AngularJS中,我们首先声明操作点在HTML中的位置(例如,ng-class为@blesh建议),然后事件修改$ scope属性,Angular为我们自动执行DOM操作。 E.g:

<div ng-controller="MyCtrl" ng-class="loadingClass">parent
   <a ng-click="loadingClass='loading'">child</a>
</div>

控制器:

function MyCtrl($scope) {
    // if you want some other class initially, uncomment next line:
    // $scope.loadingClass = 'notLoading';
}​

在上面,单击“child”链接会修改$ scope.loadingClass。 Angular将注意到更改并将新类应用于父div。

对于更复杂的操作,需要像@ jm- shows这样的自定义指令。

jQuery:事件驱动DOM遍历和DOM操作代码(命令性) Angular:事件修改$ scope并且魔术发生(在我们的声明性HTML上)。