倍数のアンダーライン$ anchorScroll

Question

角度$anchorScrollを使用していますが、完璧に動作しています。唯一の問題は次のとおりです。ページに100個のリンクがあるので、角度コードをきれいにするにはどうすればよいですか？すべてのアンカーリンクに関数を作成せずに？

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> 

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

：助けを

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