AngularJs scrollTo 问题答案

【问题标题】：AngularJs scrollTo issueAngularJs scrollTo 问题
【发布时间】：2016-04-03 16:07:33
【问题描述】：

我正在使用 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 说明的问题，但如果我用萤火虫检查它，我可以看到它需要正确的 id。

你能告诉我有什么问题吗？

【问题讨论】：

标签： angularjs angularjs-routing angularjs-ng-click scrollto

【解决方案1】：

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

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

【讨论】：

@FabioManniti 很高兴知道这一点.. 谢谢 :-)