以下是一個響應式介面：

<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);
            }
        }
    });
 

在angularjs中，一般使用directive來獲取dom元素。

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

link的scope指向的是controller的作用域，在這裡可以使用scope.X呼叫controller作用域中的變數。

在directive中應該使用：

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

 scope.resetHeight = element[0].offsetHeight;

在視窗寬度縮小的過程中，帶有文字的元素寬度會逐漸縮小，高度會逐漸增加，用元素的高度，為它的外層div的高度，就能將元素在div容器中完整的顯示出來。效果就如上圖所示。