2

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'));
        }
    };
});

感谢您提供的任何帮助。

4

2 回答 2

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');
                        }
                    }
                });
            }
于 2013-08-09T06:20:26.767 回答
0

你很近！我能够让指令在我的一个测试小提琴中工作。看一看。

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

请参阅此小提琴，其中我有您的指令示例。

jsFiddle

于 2013-08-09T06:08:01.573 回答