0

我正在使用此代码来观察孩子的身高变化：

$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>

我正在使用动画在 s 之间切换ng-if，所以： .form-sliderhas position: relative， while .animate: position: absolute。您可能知道，在这种情况下，html 不会计算高度.form-slider，我必须使用 JS 来更改它的高度。

4

1 回答 1

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更改其状态。

您需要做的只是“扩展” 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());
});
于 2015-10-20T13:49:31.743 回答