angularjs在指令中查找div的属性

Question

Angular 新手，stackoverflow 新手。几天来一直试图解决这个问题。这是我的问题：

我想将一组框居中。

有没有办法访问 div 的属性（带有 id 或类名）并在指令中操作它们？

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

我用谷歌搜索了很多，发现了类似的问题，但在我的代码中似乎没有任何问题。

这是一个小提琴： 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