Question

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

在jQuery中你可以这样做：

的 $（本）.parent（）addClass（ '负载。'）; 的

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

的 angular.element（本）.parent（）addClass（ '负载。'）; 的

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

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

谢谢！

Answer 1

默认情况下，Angular元素用 jqLite 包装（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。

Answer 2

在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上）。

使用AngularJS按摩DOM

2 个答案: