0

我在 Angular 中遇到了一个有趣的问题，我似乎无法找到解决方案。

这是来源： http: //plnkr.co/edit/XTXOYn8LcG0yb846lwbS

基本上，我使用 ng-repeat 创建一个垂直侧边栏，该侧边栏深层链接到页面的某个部分。现在，我已经静态地测试了生成的代码，它可以工作，所以也许我做的不对。

这是代码，以防你不想去 Plunker。

索引.html

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div class="span3 sidebar">
    <ul class="nav nav-tabs nav-stacked span3">
        <li ng-repeat="rule in rules">
            <a ng-click="scrollTo('{{ rule.name|toId }}')">{{ rule.name }}</a>
        </li>
    </ul>
  </div>
  <div class="span9">
    <div class="rule" ng-repeat="rule in rules">
      <section id="{{ rule.name|toId }}" >
        <header>
          <h1>{{ rule.name }}</h1>
        </header>
      </section>
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>

应用程序.js

var app = angular.module('plunker', []);

app.
  filter('toId', function(){
      return function(input){
          var out = "";

          out = input.replace(/\s+/g, '-').toLowerCase();

          return out;
      }
  });

app.
  controller('MainCtrl', function($scope) {
    $scope.rules = [
        {
          'name': 'rule1',
          'desc': 'I am a rule.'
        },
        {
          'name': 'rule2',
          'desc': 'I am a rule.'
        },
        {
          'name': 'rule3',
          'desc': 'I am a rule.'
        }
      ];

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

知道为什么会发生这种情况吗？

4

1 回答 1

3

问题出在这个表达式中：

<a ng-click="scrollTo('{{ rule.name|toId }}')">{{ rule.name }}</a>

你必须记住，AngularJS 不是一个基于字符串的模板引擎，所以你不能随便乱扔东西{{expr}}。相反，您需要根据此处描述的语法编写有效的表达式：http: //docs.angularjs.org/guide/expression

幸运的是，修复很简单：

<a ng-click="scrollTo(rule.name)">{{ rule.name }}</a>

并将过滤逻辑移动到控制器：

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

在这里工作：http ://plnkr.co/edit/QqGW8CC3kRW3t881j0yV?p=preview

于 2013-05-03T17:17:31.227 回答