Question

我有两个元素.common和.userpanel 1.我需要在加载时给出公共div的.userpanel高度 2.继续绑定窗口大小调整事件 3.继续绑定另一个事件（例如，当我运行扩展子元素的函数时，我增加了公共div的高度）

Answer 1

该指令可以帮助绑定元素之间的高度，演示可用于 https://plnkr.co/edit/hpIlWxP2DbtGgVGdrcbk?p=preview

public ActionResult Html(string strUrl) 
    {
        return View();
    }

用法就像，

app.directive('bindTo', function($document, $window) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {

      if(!attr.bindTo) {
        console.log('bindTo element not defined');
        return;
      }

      var windowElm = angular.element($window), 
        bindToElm = angular.element($document[0].querySelector(attr.bindTo));

      if(!bindToElm) {
        console.log('defined bindTo element ', attr.bindTo, ' not found');
        return;
      }

      windowElm.on('resize', bindHeight);
      scope.on('someEvent', bindHeight);

      bindHeight();

      function bindHeight() {
        var bindToElmHt = bindToElm.height();
        element.css('height', bindToElmHt);
      }
    }
  }; 
});

Answer 2

有许多javascript库可以检测element's dimensions中的更改。

其中一个是：detect-element-resize

您可以使用它来检测更改，然后使用回调重新指定高度更改。

Answer 3

技巧是使用$watch()在所需元素的高度上创建一个观察者。您可以找到其文档here。然后，您需要将函数绑定到$window上的resize事件。

几乎就是这样。您可以在下面查看一个工作示例。注意元素的高度是如何作为范围属性公开的。

＆＃13;

angular
  .module('myApp', [])
  .directive('getHeight', function() {
    return {
      controller: ['$attrs', '$element', '$scope', '$window',
        function($attrs, $element, $scope, $window) {
          ///////////////
          // Variables //
          ///////////////

          // Used to create a debounced function
          var resizeTimeout;
          var scopeVariableName = $attrs.getHeight;

          ///////////////
          // Run block //
          ///////////////

          angular.element($window).bind('resize', onResize);
          $scope.$on('$destroy', function() {
            angular.element($window).unbind('resize', onResize);
          });

          $scope.$watch(getElementHeight, function(newValue) {
            $scope[scopeVariableName] = newValue;
          });

          ///////////////
          // Functions //
          ///////////////

          function getElementHeight() {
            return $element[0].clientHeight;
          }

          function onResize() {
            // setTimeout is used rather than $timeout as this doesn't trigger
            // a new digest cycle. we trigger a digest cycle only if needed.
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
              var elementHeight = getElementHeight();
              if ($scope[scopeVariableName] === elementHeight) {
                // The 2 values are identical. There's no need for a digest cycle
              } else {
                $scope.$evalAsync(function() {
                  $scope[scopeVariableName] = elementHeight;
                });
              }
            }, 50);
          }
        }
      ],
      scope: false,
      restrict: 'A'
    }
  });

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
body {
  padding: 50px;
}
.common-style {
  color: #ffffff;
  font-family: sans-serif;
  font-size: 30px;
  width: 30%;
}
#parent {
  background: blue;
  margin: 2.5% 0;
  height: 30%;
}
#child {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="myApp" style="height: 100%;">
  <label>Custom parent height:</label>
  <input type="number" ng-model="explicitParentHeight">
  <div>If nothing is written here, then the blue div will have a height of 30%</div>
  <div id="parent" class="common-style" get-height="parentHeight" ng-style="{height: explicitParentHeight + 'px'}">PARENT</div>
  <div id="child" class="common-style" ng-style="{height: parentHeight + 'px'}">CHILD - height: {{ parentHeight }}</div>
</div>

＆＃13;

如何使用Angular绑定到元素高度并在窗口大小调整或其他事件上进行调整？

3 个答案: