Question

在页面底部的fiddle中会有一个页脚。如果您点击“更多信息”＆＃39;链接它隐藏div并显示另一个。

<div ng-app="myApp">
  <div class="footer">
    <div ng-if="!visible" class="footer-bar">
      <a href="" ng-click="toggle()">more info</a>
    </div>
    <div ng-if="visible" class="footer-drawer">
      <a href="" ng-click="toggle()">hide info</a>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
         Accusamus eos ea impedit perferendis alias sit beatae 
         nulla, at, vitae debitis nesciunt, obcaecati laudantium iure 
         quo voluptatem in assumenda ad doloribus.   
      </p>
    </div>
  </div>
</div>

angular.module("myApp", [])
    .directive("footer", [
    function footer() {
        return {
        restrict: "C",

        link: function($scope, element, attrs, ctrl) {
            $scope.visible = false;

          $scope.toggle = function toggle() {
            $scope.visible = !$scope.visible;
          }
        }
      };
    }
  ]);

如果您切换额外信息，我想要获得的是一个滑动动画。页面也必须向下滑动，以便在不向下滚动的情况下直接显示信息。

Answer 1

您需要使用scrollTop（）函数.scrollTop()，然后将watch添加到您的可见值。

需要将您的内容div带到您的app div，以便从jQuery轻松访问它。请参阅jsfiddle

angular.module("myApp", [])
  .directive("footer", [
    function footer() {
      return {
        restrict: "C",
        link: function($scope, element, attrs, ctrl) {
          $scope.visible = false;
          $scope.$watchCollection('visible', function(newValue) {
            if (newValue) {
              $(element).parent().parent().scrollTop($(element).parent().parent()[0].scrollHeight);
            }
          });
          $scope.toggle = function toggle() {
            $scope.visible = !$scope.visible;
          }
        }
      };
    }
  ]);

请参阅此question

Answer 2

这是带有动画和滚动的工作解决方案。

jsfiddle上的实例。

＆＃13;

angular.module("myApp", ['ngAnimate'])

.directive("footer", ["$timeout",
      function footer($timeout) {
        return {
          restrict: "A",

          link: function(scope, element, attrs, ctrl) {
            scope.visible = false;
            scope.toggle = function toggle() {
              scope.visible = !scope.visible;
              if (scope.visible)
                $timeout(function() {
                    $(document.body).scrollTop($(document.body)[0].scrollHeight)
                  }, 100);
                }
            }
          };
        }
      ]);

＆＃13;

.sample-show-hide {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sample-show-hide {
  -webkit-transition: all linear 1.5s;
  transition: all linear 1.5s;
}

.sample-show-hide.ng-hide {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>

<body ng-app="myApp">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
  </div>
  <div>
    <div footer>
      <button ng-click="toggle()"><span ng-show="visible">hide info</span><span ng-show="!visible">more info</span></button>
      <div ng-show="visible" class="sample-show-hide">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus eos ea impedit perferendis alias sit beatae nulla, at, vitae debitis nesciunt, obcaecati laudantium iure quo voluptatem in assumenda ad doloribus.
        </p>
      </div>
    </div>
  </div>
  <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</body>

＆＃13;

使抽屉向下滑动，有角度

2 个答案: