angluarjs监听浏览器变化，使用directive获取dom元素属性

以下是一个响应式界面：

<div ng-app="myApp">    <div id="pattern" class="pattern" ng-controller="MyController">        <div class="offcanvas-top" ng-class="{active:showMore}" ng-style="contentHeight">            <div class="o-content" get-height>                <p>Here is more content. This could be related items, navigation or other content you feel is conducive                    to                    this type of treatment.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare.                    Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi                    a                    ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio,                    tempor                    in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl.                    Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p>            </div>            <a href="#" id="trigger" ng-click="showMore=!showMore">{{herfText}}</a>        </div>    </div>

body{    margin: 0;}.offcanvas-top {    position: relative;    overflow: hidden;    height: 3.2em;    -webkit-transition: height 0.5s ease-out;    -moz-transition: height 0.5s ease-out;    -o-transition: height 0.5s ease-out;    transition: height 0.5s ease-out;}.offcanvas-top.active {    height: 13.6em;}.o-content {    width: 100%;    position: absolute;    bottom: 0;    padding: 1em 1em 2.5em;}.crumbs li a {    display: block;    padding: 1em;    border-bottom: 1px solid #000;}.crumbs li:last-child a {    border-bottom: 0;}#trigger {    position: absolute;    bottom: 0;    right: 0;    display: block;    font-size: 1em;    padding: 0 1em 1em;}

angular.module('myApp', [])    .controller('MyController', function ($scope,$interval, $window) {        $scope.herfText = 'More +';        $scope.showMore = 0;//判定是否点击了展开按钮，是为1，收起为0        //监听展开按钮的变化，每变化一次对class="offcanvas-top"的div容器高度进行重新设置。        $scope.$watch('showMore', function (data) {            if (data) {                $scope.herfText = 'Hide -';                $scope.contentHeight = {height: $scope.resetHeight + 'px'};            } else {                $scope.herfText = 'More +';                $scope.contentHeight = {height: 3.2 + 'em'};            }        });    })    .directive('getHeight', function ($interval, $window) {        //用directive中的link，获取dom的高度        return {            restrict: 'A',            link: function (scope, element, attrs) {                scope.resetHeight = element[0].offsetHeight;                //监听浏览器宽度的变化。浏览器越宽，隐藏信息高度约小                $window.addEventListener('resize', function () {                        scope.resetHeight = element[0].offsetHeight;                }, false);            }        }    });

该响应时页面通过监听浏览器size的变化，改变下拉菜单的div的高度以实现，在任何宽度下的下拉菜单响应式。如图

在angularjs中，一般使用directive来获取dom元素。

.directive('tmp', function ( ) {                return {            restrict: 'A',            link: function (scope, element, attrs) {                            }        }    });

元素的信息会传递到link的element中，可以使用console.log将element打印出来，查看相关信息。

link的scope指向的是controller的作用域，在这里可以使用scope.X调用controller作用域中的变量。

在directive中应该使用：

$window.addEventListener('resize', function () {                                        }, false);

来监听浏览器窗口大小的变化。

 scope.resetHeight = element[0].offsetHeight;

在这里，使用element中的offsetHeight属性来作为元素高度的参考，可以准确的获得元素显示所需的高度。

在窗口宽度缩小的过程中，带有文字的元素宽度会逐渐缩小，高度会逐渐增加，用元素的高度，为它的外层div的高度，就能将元素在div容器中完整的显示出来。效果就如上图所示。