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ので、 so: .form-sliderhas position: relative、 while .animate: position: absolute. ご存知かもしれませんが.form-slider、この場合、html は高さを計算しないため、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 に答える