AngularJs scrollTo issue

Question

Я создаю меню с AngularJs, и я хочу, что, щелкнув по элементу, страница переместится к разделу щелкнутого элемента. Мой код выглядит следующим образом:

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> 

код, как это не работает, но, если я пишу явно

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

он делает (очевидно, он будет прокручивать все ссылки на страницу биографии). Я думал, что это проблема при чтении AngularJs направлений, но если я проверю его с помощью firebug, я вижу, что он принимает правильные идентификаторы.

Можете ли вы рассказать мне, что не так?

Answer 1

У вас было неправильное выражение в директиве ng-click, в основном оно не должно содержать {{}} директиву интерполяции. Выражение, которое вы предоставляете ng-click непосредственно оценить с контекстом контроллера

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