Angular JS中的DOM查询; $(".myclass").each()替代方案

Question

我是Angular JS的新手,我已经使用jQuery很长一段时间了.这就是为什么我一直很难将jQuery中的jQuery转换为有角度的原因.:d

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

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

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

谢谢

Answer 1

AngularJS 中的 DOM 操作不应该在控制器、服务等中...但它应该在唯一的一处指令中...

\n\n

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

\n\n

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

\n\n

最佳实践 - Dom 操作

\n\n

没有 jQuery 的 AngularJS \xe2\x80\x94 中的 DOM 操作

\n\n

现在让我们尝试创建一个您想要的指令。看起来您想通过通过其类选择元素来操作元素。好吧，没问题，所以我们需要创建一个指令，它的restrict:\'C\'意思是CLASS ...

\n\n

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

\n\n

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

\n\n

这是PLUNKER ...

\n