4

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

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

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

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

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

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

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

谢谢！

4

2 回答 2

8

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

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

如您所见，您可以访问parent()并且addClass()因此您获得了很多 DOM 操作能力，而无需添加 jQuery 作为依赖项。

-*-

使用角度操作 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。

于 2012-11-12T03:29:21.193 回答
3

在 jQuery 中，我们经常有一些事件触发器，然后从触发事件的元素中，我们遍历 DOM 找到其他一些元素，然后对其进行操作。例如，您的示例：

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

在 AngularJS 中，我们首先声明操作点在 HTML 中的位置（例如，@blesh 建议的 ng-class），然后事件修改 $scope 属性，Angular 自动为我们进行 DOM 操作。例如：

<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';
}​

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

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

jQuery：事件驱动 DOM 遍历和 DOM 操作代码（命令式）。
Angular：事件修改 $scope 并且魔法发生了（在我们的声明性 HTML 上）。

于 2012-11-12T22:28:35.597 回答