为什么 Angularjs 指令会变成 html 注释？答案

【问题标题】：Why do Angularjs directives turn into html comments?为什么 Angularjs 指令会变成 html 注释？
【发布时间】：2014-09-17 02:04:56
【问题描述】：

我正在尝试在从 .json 文件恢复的列表中进行重复

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <span>{{phone.name}}</span>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

但是当我加载页面时，它变成了html评论

<ul class="phones">
  <!-- ngRepeat: phone in phones | filter:query | orderBy:orderProp -->
</ul>

网页

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Testing angularjs</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="script/angular.js"></script>
  <script src="script/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
Search: <input ng-model="query">

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <span>{{phone.name}}</span>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
</body>
</html>

script/Controllers.js

'use strict';

/* Controllers */
var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('data/data.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

data/data.json

[
{
 "age": 11,
 "id": "phone1",
 "name": "es un tablet",
 "snippet": "Are you here or not?"
},
{
 "age": 12,
 "id": "phone2",
 "name": "this is a phone",
 "snippet": "Are you sure?"
},
{
 "age": 13,
 "id": "phone3",
 "name": "hello moto",
 "snippet": "Are you seriously ready?"
},
]

控制台错误

XMLHttpRequest cannot load file:///D:/Dropbox/Web/Angularjs/testFromScratch/app/data/data.json. Cross origin requests are only supported for HTTP. 
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///c://testFromScratch/app/data/data.json'.
    at Error (native)
    at file:///c://testFromScratch/app/script/angular.js:8553:11
    at sendReq (file:///c://testFromScratch/app/script/angular.js:8347:9)
    at $http.serverRequest (file:///c://testFromScratch/app/script/angular.js:8080:16)
    at wrappedCallback (file:///c://testFromScratch/app/script/angular.js:11561:81)
    at wrappedCallback (file:///c://testFromScratch/app/script/angular.js:11561:81)
    at file:///c://testFromScratch/app/script/angular.js:11647:26
    at Scope.$eval (file:///c://testFromScratch/app/script/angular.js:12673:28)
    at Scope.$digest (file:///c://testFromScratch/app/script/angular.js:12485:31)
    at Scope.$apply (file:///c://testFromScratch/app/script/angular.js:12777:24)

【问题讨论】：

尝试记录$http.get()中返回的数据，如果它是空的，那么data.json请求有问题。
$http.get() 没有得到 url，它给我一个错误，但我可以打开路径

标签： javascript json angularjs angularjs-ng-repeat

【解决方案1】：

您需要phones/phones.json，并且该文件似乎标记为data/data.json。

cmets 是 Angular 标记其标记的方式（请参阅Remove helper HTML comments in Angular JS?）。由于使用了错误的文件名，您没有包含实际数据，因此没有电话可供列出。当您更改文件名时，评论仍会存在，但下方会显示电话列表。

【讨论】：

对不起，我的错误，那是原始路径，但我使用的是 data/data.json，但我仍然有这个错误。

【解决方案2】：

我认为您正在阅读的 JSON 文件有问题。

尝试绕过文件，直接在代码中写入数据

例如：

 $scope.phones = [
                    {
                     "age": 11,
                     "id": "phone1",
                     "name": "es un tablet",
                     "snippet": "Are you here or not?"
                    },
                    {
                     "age": 12,
                     "id": "phone2",
                     "name": "this is a phone",
                     "snippet": "Are you sure?"
                    },
                    {
                     "age": 13,
                     "id": "phone3",
                     "name": "hello moto",
                     "snippet": "Are you seriously ready?"
                    },
                    ];   
$scope.orderProp = 'age';

【讨论】：

这种方式效果很好，所以肯定是$http，但是不知道怎么办。
如果纯硬编码数据有效，则表示未执行 ajax 调用或从服务器返回的数据有问题。为了区分这两者，您必须在 firefox 中使用 firebug 的 chrome 调试器进行调试。在 $scope.phones = data 的行设置断点并查看从服务器返回的内容并查看 Web 控制台以查看是否执行了调用的 ajax 或遇到错误