angularjs在指令中查找div的属性

Question

对角度来说是新手，对于堆栈溢出来说是新手。 几天来一直试图解决这个问题。 这是我的问题：

我想把一组盒子居中。

有没有一种方法可以访问div的属性（具有ID或类名）并在指令中对其进行操作？

在我的HTML中，我正在使用ng-repeat创建div，这些div是显示的框。 我有一个指令，我目前正在尝试使用它来查找和操纵html中div /指令的属性，但是我似乎无法做到这一点。

我在Google上搜索了很多，发现了类似的问题，但是似乎在我的代码中没有任何效果。

这是一个小提琴： http : //jsfiddle.net/3m87R/

app.directive('someBoxes', function()
{
    return function(scope, element, attrs)
    {
        element.css('border', '1px solid white');
        //element.css('width', '200px');

        var body = angular.element(document).find('.bookitem');
        console.log(body[0].offsetWidth);

        if(scope.$last)
        {
            //console.log("element name is: " + element.attr("class"));
            //console.log("element is: " + element);
            //console.log($(".bookitem").children("div").attr("class"));
            //console.log($('.container').children('div').attr('class'));
        }
    };
});

感谢您提供的任何帮助。

Answer 1

原因是因为ng-repeat更改了DOM，子元素在指令编译期间不可用。 因此在子元素上需要一个$ watch。

这会通知指令添加了子元素，然后对其执行操作。

$ watch必须跳过nodeType，它是“ comment：（type 8）”

这是工作的小提琴： http : //jsfiddle.net/3m87R/3/

链接中的部分：

 link: function ($scope, element, attrs, controller) {
                    $scope.$watch(element.children(),function(){
                    var children = element.children();
                    for(var i=0;i<children.length;i++){
                        if(children[i].nodeType !== 8){
                            angular.element(children[i]).css('background', 'orange');
                        }
                    }
                });
            }

Answer 2

你近了！ 我能够在我的测试小提琴之一中使指令生效。 看一看。

$(element).css('border', '1px solid red');
$(element).css('text-align', 'center');

看到这个小提琴，那里有您的指令示例。

的jsfiddle