如何根据Angular中没有jQuery的其他元素的高度设置页脚页边距？

Question

正如我在问题中所说,我想要实现的是仅相当于Angular中的代码:

jQuery的方式

$(document).ready(function(){
  var windowHeight = $(window).height();
  var headerHeight = $('header').height();
  var footerHeight = $('footer').height();
  var contentHeight = $('.content').height();
  var paginationHeight = $('.pagination').height();

  var footerMarginTop = (windowHeight - headerHeight - footerHeight) - (contentHeight + paginationHeight);

  $('footer').on('content.loaded', function() {
    if(footerMarginTop > 0) {
      $(this).css('margin-top', footerMarginTop + 'px');
    }
  }
});

在准备好文档时,我必须在加载页面内容后,根据其他元素的高度计算设置页脚的页边距顶部.在jQuery中思考很容易,但在Angular中,我没有找到其他方法,除了直接翻译它,如此,使用目录

角度方式

angular.module('myApp', []).directive('FooterMargin', ['$window', '$document', function($window, $document){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var windowHeight = $window.innerHeight;
      var headerHeight = $document[0].getElementById('header').offsetHeight;
      var footerHeight = $document[0].getElementById('footer').offsetHeight;
      var paginationHeight = $document[0].getElementById('pagination').offsetHeight;
      var contentHeight = $document[0].getElementById('content').offsetHeight;

      var footerMarginTop = (windowHeight - headerHeight - footerHeight) - (contentHeight + paginationHeight);

      scope.$on('content.loaded', function(){                          
          if(footerMarginTop > 0) {
            attrs.$set('style', 'margin-top: ' + footerMarginTop + 'px');
          }
        }
      });
    }
  };
}]);

我已经在我的元素中添加了ID以在Angular中检索它们,但即使它正在工作,在我看来这不是一个好方法,并且它也很难对它进行单元测试.

我不能在这个项目中使用jQuery,并且我已经使用Angular来获得更容易获得的事件的其他指令(比如模态和下拉)以令人满意的方式

你能帮助我理解如何以更好的Angular方式解决这个问题吗？

Answer 1

一种更 Angular 的方式可能是使用服务和另一个指令，定义您想要选择的元素并将其高度设置为服务。

然后，您的原始指令将从新服务中检索预先计算的高度。

在我的示例中，我使用工厂heightFactory即服务。我还必须添加一个丑陋的超时来等待 DOM 元素正确渲染（并具有大小）。我认为这也是您想要scope.$on('content.loaded')在示例中实现的目标。

请注意标记中指令的用法，例如set-height="header"，对于具有标题高度的元素。每个元素将其高度注册到服务后，返回值heightFactory.getMarginTop()将根据您的算法进行。

// this directive will ste the window height and retrieve the margin value from the height service
angular.module('myApp', []).directive('footerMargin', ['$window', 'heightFactory',
  function($window, heightFactory) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        heightFactory.setHeight('window', $window.innerHeight);

        // delay only for testing purposes, remove this
        $window.setTimeout(function() {
          attrs.$set('style', 'margin-top: ' + heightFactory.getMarginTop() + 'px');
          console.log(heightFactory.getMarginTop());
        }, 1000);


        scope.$on('content.loaded', function() {
          if (heightFactory.getMarginTop() > 0) {
            attrs.$set('style', 'margin-top: ' + heightFactory.getMarginTop() + 'px');
          }
        });
      }
    };
  }
]);

// this directive is used for each element, whichs size you want need for your calculation
angular.module('myApp').directive('setHeight', ['heightFactory',
  function(heightFactory) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.ready(function() {
          heightFactory.setHeight(attrs['setHeight'], element[0].offsetHeight);
          console.log(attrs['setHeight'] + ' set to ' + element[0].offsetHeight);
        });
      }
    }

  }
]);

// the algorithm for the margin is hardcoded, this service could also just return an object with the heights, and the algorithm would still be in your original directive. It depends on the use case imho.
angular.module('myApp').factory('heightFactory', [
  function() {
    var height = {};

    return {
      setHeight: function(element, value) {
        height[element] = value;
      },
      getMarginTop: function() {
        return (height['window'] - height['header'] - height['footer']) - (height['content'] + height['pagination']);
      }
    };

  }
]);

#header {
  background-color: red;
}
#footer {
  background-color: blue;
}
#pagination {
  background-color: grey;
}

<body ng-app="myApp">
  <header id="header" set-height="header">Header</header>

  <section id="content" set-height="content">
    <p>Some Content</p>
    <p>Some Content</p>
    <p>Some Content</p>
    <p>Some Content</p>
  </section>

  <div id="some element" footer-margin>Some Element</div>
  <section id="pagination" set-height="pagination">
    1 2 3 4 5 6
  </section>
  <footer id="footer" set-height="footer">Footer</footer>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>