javascript - Angular JS 中的 DOM 查询； $ (".myclass").each() 替代

Question

<分区>

Answer 1

angularjs 中的 DOM 操作不应该在 Controller 、服务等中......但它应该在唯一的一个地方 directives......

如果你想操作 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 ...