Angular ng-repeat与深层链接不起作用

我在Angular中发现了一个有趣的问题，我似乎无法找到解决方案。Angular ng-repeat与深层链接不起作用

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

基本上我使用的是NG重复创建垂直侧边栏深层链接到网页的某一部分。现在，我已经静态测试了生成的代码，它可以工作，所以也许我没有做正确的事情。

继承人是代码，以防你不想去找Plunker。

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

任何想法，为什么这可能发生？

来源

2013-05-03 alvincrespo

的问题是在这个表达式：

<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-03 17:17:31

感谢您回复我。看起来，这对于页面上的静态内容起作用，但不能使用ng-repeat动态生成内容？ http://plnkr.co/edit/Lb5qUaTeRZn9D4od4J1Z – alvincrespo 2013-05-08 16:28:26

Angular ng-repeat与深层链接不起作用

回答

相关问题