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检查它，我可以看到它需要正确的id。

你可以告诉我出了什么问题吗？

Answer 1

ng-click指令中的表达式不正确，基本上它不应包含{{}}插值指令。您提供给ng-click的表达式将直接使用控制器

的上下文进行评估

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

AngularJs scrollTo问题

1 个答案: