angularjs在指令中查找div的属性

Question

new to angular, new to stackoverflow. been trying to solve this for days. here is my problem:

I want to center a group of boxes.

Is there a way to get access to properties of div's (with id or class names) and manipulate them in a directive?

in my html I am creating divs with ng-repeat, the divs are the boxes that are displayed. I have a directive that I, for now, am trying to use to find and manipulate properties of the div's/directives in the html, however I can't seem to do this.

I have googled a lot and have found similar issues but nothing that seems to work in my code.

here's a fiddle: 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'));
        }
    };
});

Thank you for any help provided.

Answer 1

The reason is because ng-repeat changes the DOM, the children elements are not available during directive compilation. so a $watch is needed on child elements.

This notifies the directive that child elements are added and then perform operation on them.

The $watch must skip the nodeType which is "comment:(type 8)"

here is the working fiddle: http://jsfiddle.net/3m87R/3/

The part in link:

 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

You are close! I was able to get the directive working in one of my test fiddles. Take a look.

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

See this fiddle where I have a sample of your directive.

jsFiddle