Angular JS中的DOM查询$(“.myclass") . each()的选择

DOM Query in Angular JS ; $(".myclass").each() Alternative

本文关键字：quot each 选择 myclass 中的 JS DOM 查询 Angular      更新时间：2023-09-26

我对Angular JS比较陌生，我已经使用jQuery很长时间了。这就是为什么我一直很难将我体内的jQuery转换成angular的原因。: D

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

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

有谁能告诉我一个angular程序员怎么做这样的事情吗?

谢谢

angularjs中的DOM操作不应该在controller, services等…但是如果它应该在唯一的地方指令…

如果你想操作一个DOM，你应该使用指令，并使你的操作在那里…

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

最佳实践- Dom操作

AngularJS中的DOM操作-不使用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
        }
    };
});

$('selector')可选为angular.element('selector'), $.each可选为angular.forEach。因此，您的代码看起来像:

var els = angular.element('.myClass');
angular.forEach(els, function( el ){
   angular.element(el).doSomething();
})
相关文章：