Question

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

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

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

如果您不想去Plunker，那么Heres就是代码。

的index.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>

app.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();
      };
  });

知道为什么会这样吗？

Answer 1

问题在于这个表达式：

<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

Angular ng-repeat不使用深度链接

1 个答案: