Question

我编写了一个指令，将父元素的子元素设置为等于最高子元素的高度。这是指令代码：

    app.directive('equalHeightChildren', function(){
        return function(scope, element, attrs){

            var $tallest = element;

            $.each(element.children(), function(index, child){

                if($(child).outerHeight() > $tallest.outerHeight()){
                        $tallest = $(child);
                }

            });

            element.children().outerHeight($tallest.outerHeight() + 'px');
        }
    });

此代码在页面加载时运行并正确调整高度。但是，我的应用程序中有一些范围变量可以更改这些子元素的高度（例如，选中一个复选框会在其中一个子元素中显示一个新表单，增加其高度）。我希望当其中一个变量发生变化时，该指令会重新运行，从而重新调整子元素的高度。但是，这似乎并没有发生。

当范围变量发生变化时，有没有办法让指令运行？或者我错误地想到了这个？

Answer 1

如果您希望它重新运行每个，您可能需要一个观察者关于变化的元素。另一种选择是触发一个事件，并使用该指令处理它。

app.directive('equalHeightChildren', function(){
        return function(scope, element, attrs){

         var setTallest = function(){
            var $tallest = element;

            $.each(element.children(), function(index, child){

                if($(child).outerHeight() > $tallest.outerHeight()){
                        $tallest = $(child);
                }

            });

            element.children().outerHeight($tallest.outerHeight() + 'px');
        }

         setTallest();

       //Use one of these to cause the height to be reset
       //$scope.$watch('myVar', function() {setTallest(); });
      // $rootScope.on('eventTrigger', setTallest);
        }
    });

如果范围值更新，则运行Angular指令

1 个答案: