Question

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

$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-slider有position: relative，.animate：position: absolute。您可能知道，在这种情况下，html不会计算.form-slider的高度，我必须使用JS来改变它的高度。

Answer 1

我发现解决此问题的唯一方法是对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());
});

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

1 个答案: