0

我正在制作一个具有子页面的单页应用程序。

这个想法是，我有网址，例如主页、关于和联系方式。然后每个页面都有多个块。

当页面加载时，块被设置为最小高度。最小高度是窗口高度。这是动态的，因此当您调整大小时，最小高度将被重置。

目前，路线是#/home/:blockId

当有人访问http://www.test.com/#/home/page-17时，应用程序应该向下滚动到该块。

我当前的代码有效，但我返回的最高位置是设置最小高度之前的前一个位置。

如果我不清楚，请随时询问更多详细信息。谢谢

见 jsFiddle：http: //jsfiddle.net/7nc9q/5/

Javascript：

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

app.controller( 'appController', function( $scope ) {
  //Main login here
});
app.controller( 'routeController', function( $scope, $routeParams ) {
  /* 
    Scroll to element ID
  */
  $scope.scrollTo = function(selector){
    if(jQuery('#' + selector).length == 1){
      console.log(jQuery('#' + selector).position().top);
      jQuery('html, body').animate({
        scrollTop:  jQuery('#' + selector).position().top
      });
    };
  }
  if(typeof $routeParams.page !== 'undefined' && $routeParams.page.length > 0){
    $scope.scrollTo($routeParams.page);
  }
});
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home/:page', {
        templateUrl: 'templates/home.html',
        controller: 'routeController'
      }).
      otherwise({
        redirectTo: '/home/'
      });
}]);

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

索引.html：

<!doctype html>
<html ng-app="siteApp" ng-controller="appController">
  <head>
    <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>
    <script src="assets/js/app.js"></script>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="view" ng-view></div>
    </div>
  </body>
</html>

模板/home.html

<div class="page" id="page-17" >
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-18">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-19">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-20">
    <div class="page-inner" ng-style="style()" resize></div>
</div>

页面布局示例：

在此处输入图像描述

4

2 回答 2

2

有一个 angular $anchorScroll的内置属性确保你包含在你的控制器中

  $scope.anchorScroll = function()
            {
                $location.hash('compose-message');

                $anchorScroll();
            }

有关更多信息，请查看文档：https : //docs.angularjs.org/api/ng/service/ $anchorScroll

唯一的问题是：它首先更新 url，然后正常执行所需的操作，使用以下代码来避免它：

  $scope.anchorScroll = function()
                {
    var old = $location.hash();
                    $location.hash('compose-message');
                    $anchorScroll();
                    $location.hash(old);
}
于 2015-09-01T12:18:35.157 回答
1

问题似乎是在完全设置最小高度之前正在运行 scrollTo 函数。调整大小对我来说似乎是一个红鲱鱼，因为即使没有任何调整大小也会出现问题。

要修复它，请运行包裹在 $timeout 中的 scrollTo（即使只有 1 毫秒）。这将强制首先完全应用 DOM 更新，然后它应该可以正常工作。也就是说，将其更改为：

$scope.scrollTo($routeParams.page);

至：

$timeout(function() { $scope.scrollTo($routeParams.page) }, 1);

工作解决方案：http: //jsfiddle.net/7nc9q/6/

顺便说一句，角度控制器不应该有任何对 DOM 或 jQuery 选择器的引用，对 DOM 的引用只应该在指令中。

于 2013-11-14T18:01:37.083 回答