Question

我遇到了一个问题，我看不出任何出路。

我有一个页面应用程序，我目前正在使用角度滚动进行导航。现在，我想要完成的是以下内容：

我有两个“img”按钮，一个是ScrollDown，另一个是ScrollUp。有没有办法创建一个指令作为角度滚动和/或AngularJS的一部分？当用户点击ScrollDown按钮时，它将滚动到下一个div id（可能会将某个数组中的id放置在当前位置将被保存的位置，因此单击以触发滚动到下一个数组值）并且当用户滚动到底部，按钮应更改为ScrollUp，单击应将用户返回到页面顶部。

我希望我已经很好地解释了这一点，我们将非常感谢任何帮助。

P.S。只是一个注释，该应用程序是纯粹的AngularJS，所以应该没有jQuery依赖。

修改

我还应该指出，我现在正在学习Angular，所以任何帮助都会非常感激。

这就是我目前用于导航栏导航的内容：

var ScrollApp = angular.module('myApp.ScrollApp', ['duScroll', 'ngAnimate']).value('duScrollOffset', 60);

ScrollApp.controller('ScrollCtrl', function($scope){
        var container = angular.element(document.getElementById('container'));
        var sectionhome = angular.element(document.getElementById('Home'));
        $scope.toTheTop = function() {
            container.scrollTop(60, 5000);
        };
        $scope.toHome = function() {
            container.scrollTo(sectionhome, 60, 1000);
        };
        $scope.scrollVariable = false;
    }
);

有没有办法将一个指令附加到下面的控制器，它将包含一个部分锚点数组，添加一个位置监视器，这样当用户点击按钮时，它会将他带到下一个div id，当他到达底部，按钮图像改变并将用户带回到顶部。

我希望这个问题现在得到妥善制定。

Answer 1

var app = angular.module('app', []);

app.controller('scrollCtrl', ['$scope', function ($scope) {
  $scope.ids = ['id1','id2','id3','id4','id5'];
}]);

app.directive('myScroll', [ function () {
  return {
    restrict: 'E',
    template: '<div id="template" style="position:fixed; top: 2px;left: 35px;"><input type="button" value="up"  ng-click="up()"><input type="button" value="down" ng-click="down()"></div>',
    scope: {
      ids: '='
    },
    controller: ['$scope','$location','$anchorScroll', function ($scope, $location, $anchorScroll) {
      
      var current = 0;
      
      var scrollTo = function (id) {
        $location.hash($scope.ids[id]);
        $anchorScroll();
      };
      
      $scope.down = function () {
        if ($scope.ids.length - 1 > current)
        {
          current++;
          scrollTo(current);
         
        } else {
          current = 0;
          scrollTo(current);
        }
      };
      
      $scope.up = function () {
        if (current > 0)
        {
          current--;
          scrollTo(current);
        } else {
           current = $scope.ids.length -1;
           scrollTo(current);
        }
       
      }
    }]
  };
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    
  </head>

  <body ng-controller="scrollCtrl">
    <my-scroll ids="ids"></my-scroll>
    <div ng-repeat="id in ids" style="height:500px; background-color:yellow;">
      <div id="{{id}}">
        <h3>{{id}}</h3>
      </div>
    </div>
  </body>
</html>

- SJ

AngularJS - 创建浮动向下滚动/返回顶部按钮

1 个答案: