ng-show | ng-hide:监视元素高度

时间:2015-10-20 08:27:39

标签: angularjs height ng-show ng-hide

我使用此代码观看儿童身高变化:

$scope.$watch(function () {
    return element.children().height();
},
function (newHeight) {
    if (newHeight) {
        element.height(newHeight);
    }
});

ng-if效果很好,但ng-show | ng-hide没有触发高度变化事件。 当我使用ng-show | ng-hide指令时,有没有办法观察高度?

示例:

<div class="form-slider">
  <div ng-if="step === 1" class="animate">
    <div ng-show="error">Error message</div>
    Some content
  </div>
  <div ng-if="step === 2" class="animate">
    <div ng-show="error">Error message</div>
    Some content
  </div>
</div>

我使用动画在ng-if之间切换,所以: .form-sliderposition: relative.animateposition: absolute。您可能知道,在这种情况下,html不会计算.form-slider的高度,我必须使用JS来改变它的高度。

1 个答案:

答案 0 :(得分:0)

我发现解决此问题的唯一方法是对removeClass | addClass类使用ng-hide个事件:

myModule.animation('.ng-hide', function () {
  var changeHeight = function (element) {
    var container = element.closest('.my-selector');
    container.parent().height(container.height());
  };
  return { removeClass: changeHeight, addClass: changeHeight }
});

不确定这是否是最佳解决方案,但至少它是否有效。

<强>更新

我找到了更好的解决方案。当您需要使用JS计算页面高度并希望动态更新高度时ng-show | ng-hide更改其状态。

您需要做的只是&#34;延伸&#34; ngShow & ngHide

(function () {
    var heightDirective = ['$rootScope', '$timeout', function ($rootScope, $timeout) {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                $scope.$watch(attrs.ngShow, function (newVal, oldVal) {
                    if (!angular.equals(newVal, oldVal)) {
                        $timeout(function () {
                            $rootScope.$broadcast('element:heightChange', element.height());
                        }, 100);
                    }
                });
                $timeout(function () {
                    $rootScope.$broadcast('element:heightChange', element.height());
                }, 500);
            }
        }
    }];
    angular.module('mean.system').directive('ngShow', heightDirective);
    angular.module('mean.system').directive('ngHide', heightDirective);
    angular.module('mean.system').directive('ngIf', heightDirective);
})();

然后,将监听器添加到您的控制器或指令中:

$rootScope.$on('element:heightChange', function () {
    element.height(element.children().height());
});