Question

我写了一个包含阻止列表的应用程序。

每个块包含指向其他块的链接。当点击一个块的链接，例如＃/ home / page-19时，页面会根据当前位置向下/向上设置动画。

这一切当前都有效，但是当点击锚点并且路线更新时，浏览器会跳到顶部然后设置为动画，我需要它从当前位置设置动画。

我写了一个指令，将preventDefault添加到所有锚点。

请参阅下面的JS小提琴。 http://jsfiddle.net/ygNWF/10/

剥离代码：

HTML：

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

<body ng-app="app" ng-controller="appController">
    <script type="text/ng-template" id="home-template">
       <div class="page" id="page-17" >
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-18">Page 18</a></div>
          </div>
          <div class="page" id="page-18">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-19">Page 19</a></div>
          </div>
          <div class="page" id="page-19">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-20">Page 20</a></div>
          </div>
          <div class="page" id="page-20">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-17">Page 17</a></div>
          </div>
    </script>

    <div class="wrapper">
      <div class="view" ng-view scroll></div>
    </div>
</body>

的javascript：

var app = angular.module('app', []);

/*
  Controllers
*/
app.controller( 'appController', function( $scope ) {

});
app.controller( 'routeController', function( $scope, $routeParams ) {
  //When route change, check if page has been updated and run animateScroll directive
  if(typeof $routeParams !== 'undefined' && $routeParams.page.length > 0){
    $scope.animateScroll($routeParams.page);
  }
});

/*
  Page routes
*/
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home/:page', {
        templateUrl: 'home-template',
        controller: 'routeController'
      })

      .otherwise({
        redirectTo: '/home/'
      });
}]);

/*
  Directives
*/
app.directive('scroll', function ($routeParams, $timeout) {
  /* 
  Scroll to element ID
  */
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      scope.animateScroll = function(page) {
        $timeout(function(){
          console.log('test');
          if(jQuery('#' + page).length == 1){
            jQuery('html, body').animate({
              scrollTop:  jQuery('#' + page).position().top
            }); 
          };
        }, 1);
      };
    }
  };
});

app.directive('resize', function ($window) {
  return function (scope, element) {
    var w = angular.element($window);

    scope.getWindowDimensions = function () {
      return { height: w.height() };
    };

    scope.$watch(scope.getWindowDimensions, function (dimensions) {
        scope.windowHeight = dimensions.height;
        scope.style = function () {
          return { 
              'min-height': scope.windowHeight + 'px'
          };
        };
    }, true);

    w.bind('resize', function () {
      scope.$apply();
    });
  }
});

app.directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      elem.on('click', function(e){
        e.preventDefault();
      });
    }
  };
});

页面布局示例：

enter image description here

Answer 1

我不确定滚动应该与路由混合。我最好这样做： 1.使用ng-click而不是href和href="javascript:"（如果你支持IE8，这是必要的） 2.使用向下滚动的函数接收元素的id。

以下示例

http://jsfiddle.net/naS4U/

AngularJS滚动到元素可防止浏览器跳转

1 个答案: