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與深層鏈接不起作用

回答

相關問題