AngularJs scrollTo issue

Question

Je fais un menu avec AngularJs et je veux que, en cliquant sur l'élément, la page défile à la section de l'élément cliqué. Mon code est le suivant:

script.js

var app = angular.module('allApps',['ui.bootstrap']); 
app.controller("menuCtrl",function($scope, $location, $anchorScroll){ 
    $scope.menuItems=[ 
         {page:"Biography", id:"bio"}, 
         {page:"Curriculum Vitae", id:"cv"}, 
         {page:"Gallery", id:"gallery"}, 
         {page:"Video", id:"video"}, 
         {page:"Press", id:"press"}, 
         {page:"News", id:"news"}, 
         {page:"Contact", id:"contact"} 
         ]; 

    $scope.scrollTo = function(id) { 
     $location.hash(id); 
     console.log($location.hash()); 
     $anchorScroll(); 
    }; 
}); 

menu.html

<ul class="nav nav-pills" id="mainMenu" ng-controller="menuCtrl"> 
    <li class="active"><a href="#/">Home</a></li> 
    <li ng-repeat="item in menuItems"><a ng-click="scrollTo('{{item.id}}')" href="">{{item.page}}</a> 
</ul> 

le code comme cela ne fonctionne pas, mais, si j'écris explicitement

ng-click="scrollTo('bio')" 

il fait (évidemment, il fera défiler tous les liens vers la page biographie). Je pensais que c'était un problème en lisant les directions AngularJs mais si je le vérifie avec firebug, je peux voir qu'il prend le bon identifiant.

Pouvez-vous me dire ce qui ne va pas?

Answer 1

Vous aviez une expression incorrecte dans ng-click directive, fondamentalement, il ne devrait pas contenir {{}} directive d'interpolation en elle. L'expression que vous fournissez à ng-click va évaluer directement le contexte du contrôleur

ng-click="scrollTo(item.id)"