处理完子节点后，如何在 Angular 指令中调用函数？

Question

我正在尝试使用 Angular JS 指令将 div 的内容居中。

这是模板的简化版：

<div id="mosaic" class="span12 clearfix" s-center-content>
    <div ng-repeat="item in hits" id="{{item._id}}" >
    </div>
</div>

这是指令：

 module.directive('sCenterContent', function() {
    var refresh = function(element){
        var aWidth= element.innerWidth();
        var cWidth= element.children()[0].offsetWidth;
        var cHeight= element.children()[0].offsetHeight;
        var perRow= Math.floor(aWidth/cWidth);
        var margin=(aWidth-perRow*cWidth)/2;
        if(perRow==0){
            perRow=1;
        }
        var top=0;
        element.children().each(function(index, child){
            $(child).css('margin-left','0px');
            if((index % perRow)==0){
                $(child).css('margin-left',margin+'px');
            }
        });
    };
    return {
        link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });
        }
    };
});

它基本上是浮动一些内部div，并为每行的第一个div添加一个边距，因此内容居中。

调整浏览器大小时，这可以正常工作。当我在初始化后尝试进行刷新时，问题就出现了。

我已尝试使用this question 中的帖子链接功能。 pre link 和 post link 函数按预期顺序调用，但不是在具有 s-center-content 指令的 elemenet 的子级被渲染之后。由于找不到子节点，刷新调用失败。

如何调用 refresh 以确保子项已得到处理？

Answer 1

我认为使用 angular 的 $watch 是一个更好、更优雅的解决方案：

link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });

            var watchCount = 0,
            unWatcher = $watch(
                function() {
                   return $('*[s-center-content] img').length !== 0;
                },
                function() {
                   // ensure refresh isn't called the first time (before the count of elements is > 0)
                   if (++watchCount === 1) {
                       return;
                   }

                   refresh(element);                   

                   // stop watching the element now that refresh has been called
                   unWatcher();
                }, true);
        }

关于停止观看：AngularJS : Clear $watch

Answer 2

这是一个反复出现的问题（在某个地方存在与此相关的问题，以及谷歌论坛中的一个主题..）

Angular 无法知道 dom 何时完成，它只能知道它调用的函数何时返回（以及任何 Promise 都已解决）。如果这些函数是异步的并且没有回调或承诺，则无法获得通知。

我看到它完成的方式（以及我完成它的方式）是使用 setInterval 定期检查 DOM 以查看它是否处于完成状态。我讨厌这个解决方案，并且会很感激有一个替代方案，但是，它确实完成了工作。

Answer 3

终于成功了！

我使用了 livequery 插件，并在链接方法的末尾添加了以下行：

$('*[s-center-content] > *').livequery( function(event){
    refresh(element);
});

我使用 s-center-content 指令选择元素的任何第一级子元素（当前和未来），并附加一个处理程序，当元素添加到 DOM 时调用该处理程序。

编辑

最后一点。我的内容的布局主要取决于具有动态评估src 属性的内部图像。所以为了让它工作，我不得不把代码改成这样：

$('*[s-center-content] img').livequery( function(event){
    $(this).load(function(){
       refresh(element);                    
    });
});

将左浮动 div 居中放置的指令的完整代码如下。请注意，它依赖于将计算出的边距添加到行中的第一个 div。

module.directive('sCenterContent', function() {
    var refresh = function(element){
        var aWidth= element.innerWidth();
        var cWidth= element.children()[0].offsetWidth;
        var cHeight= element.children()[0].offsetHeight;
        var perRow= Math.floor(aWidth/cWidth);
        var margin=(aWidth-perRow*cWidth)/2;
        if(perRow==0){
            perRow=1;
        }
        var top=0;
        element.children().each(function(index, child){
            $(child).css('margin-left','0px');
            if((index % perRow)==0){
                $(child).css('margin-left',margin+'px');
            }
        });
    };
    return {
        link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });
            $('*[s-center-content] img').livequery( function(event){
                $(this).load(function(){
                    refresh(element);                   
                });
            });
        }
    };
});

Answer 4

我相信这可以通过 css 来实现。是不是像这样不分数量的以目标为中心的元素？

[]  []  []  []  []

    []  []  []

如果是这样，这绝对可以用 css 实现，并且可以用更少的复杂性来实现。 这是一个例子：

http://codepen.io/thetallweeks/pen/kvAJb