Question

我对Angular JS比较新，我已经使用jQuery很长一段时间了。这就是为什么我一直很难将jQuery中的jQuery转换为有角度的原因。：d

我想知道如何以角度执行DOM查询。基本上，我面临的情况是我必须做这样的事情

$(".myClass").each(function(){
   $(this).doSomething();
})

任何人都可以建议我角度程序员如何做这样的事情。

由于

Answer 1

angularjs中的DOM操作不应该在控制器，服务等中......但它应该只在一个地方指令 ......

如果你想操纵一个DOM，你应该使用指令并在那里进行操作......

这里有一些关于angularjs中DOM操作的好文章......

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

现在让我们尝试创建一个你想要的指令。看起来你想通过他们的类选择它们来操纵元素。没问题，所以我们需要创建一个restrict:'C'表示 CLASS ......

的指令

这是我们的指令声明......（显示所有内容的详细版本）

app.directive('myClass',function(){
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        restrict: 'C', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        // templateUrl: '',
        // replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {
            console.log('Here is your element', iElm);
                    // DO SOMETHING
        }
    };
});

这里是PLUNKER ...

Answer 2

$('selector')的替代方案是angular.element('selector')，$.each的替代方案是angular.forEach。因此，您的代码看起来像：

var els = angular.element('.myClass');
angular.forEach(els, function( el ){
   angular.element(el).doSomething();
})

Angular JS中的DOM查询; $（＆＃34; .myclass＆＃34;）。each（）替代品

2 个答案: