我知道操纵DOM违反了Angular的规则但是在这种情况下,我已经横穿DOM来修改兄弟节点。
在jQuery中你可以这样做:
的 $(本).parent()addClass( '负载。'); 的
在Angular中你会做这样的事情:
的 angular.element(本).parent()addClass( '负载。'); 的
当然这不起作用,因为API上没有parent()方法或addClass()方法支持。
这让我想到了这个问题,我还能怎样做到这一点?
谢谢!
答案 0 :(得分:8)
默认情况下,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。
答案 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上)。