javascript - 具有倍数的 Angular $anchorScroll

Question

我正在使用 Angular $anchorScroll 并且它工作完美，唯一的问题是:我将在页面中有 100 个链接，那么使我的 Angular 代码干净的最佳方法是什么？没有为每个 anchor 链接创建一个函数？

html:

    <div id="scrollArea" ng-controller="ScrollController">
      <a ng-click="gotoBottom()">Go to bottom</a>
      <a id="bottom"></a> bottom!
    </div>

  <div id="scrollArea" ng-controller="ScrollController">
      <a ng-click="gotoHeader()">Go to header</a>
      <a id="header"></a> header!
    </div>

 <div id="scrollArea" ng-controller="ScrollController">
      <a ng-click="gotoMid()">Go to mid</a>
      <a id="mid"></a> mid!
    </div>

脚本.js

    angular.module('anchorScrollExample', [])
    .controller('ScrollController', ['$scope', '$location', '$anchorScroll',
      function($scope, $location, $anchorScroll) {
        $scope.gotoBottom = function() {
          $location.hash('bottom');
          $anchorScroll();
        };
     $scope.gotoMid = function() {
      $location.hash('mid');
      $anchorScroll();
     };

     $scope.gotoHeader= function() {
      $location.hash('header');
      $anchorScroll();
     };

    }]);

Answer 1

您可以将参数传递给在模板中调用的函数。

 angular.module('anchorScrollExample', [])
 .controller('ScrollController', ['$scope', '$location', '$anchorScroll',
      function($scope, $location, $anchorScroll) {
          $scope.goto = function(anchor){
              $location.hash(anchor);
              $anchorScroll();
         }
}]);

然后在 View 中:

<div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="goto('header')">Go to header</a>
  <a id="header"></a> header!
</div>