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