Question

我是角色的新手，并尝试将其集成到我的应用程序中。我正在尝试使用简单的 ng-repeat （在我设置的示例项目中完美运行）。但是，在当前项目中，我使用的是Swig模板语言，它使用{{}}从.JSON文件中获取数据，例如：

person.html文件：

<div> {{ myFirstName }} </div>
<div> {{ mySurName }} </div>

person.json文件：

{
    "myFirstName"   : "Joe",
    "mySurName" : "Bloggs",
}

我认为我面临的问题是，Swig使用{{}}从.JSON文件中获取数据，而Angular也使用{{}}。

这是我简单的ng-repeat：

<ul ng-controller="MyCtrl">
   <li ng-repeat="country in countries">
       {{country.name}} has population of {{country.population}}
   </li>
</ul>

这是我的简单控制器：

require(['app'], function(app) {
'use strict';

   app.controller("MyCtrl", function($scope) {

      $scope.countries = [
          {name: 'France', population: 63.1},
          {name: 'United Kingdom', population: 61.8}
      ];

   });
});

打开我的HTML页面时，显示的所有内容都是：

 has population of
 has population of

关于我如何解决这个问题的任何想法？

由于

更新

我想使用angular来从.JSON文件中检索数据

UPDATE Folloiw David Beech的推荐

应用程序树：

- application
     - resources
           - CSS
           - img
           - JS
           - data
                - countries-data.json
     - pages
           - countries.html

在下面的示例解决方案中，我的$ http.get是

$scope.countries  = [];
  $http.get('/resources/data/countries-data.json', function(data){

Firebug中显示错误：＆＃34; NetworkError：404 Not Found - http：// localhost：8000 / resources / data / countries-data.json＆＃34;

Answer 1

要回答问题的第2部分并获取角度来检索json文件，请使用$ http服务。 http://docs.angularjs.org/api/ng/service/ $ HTTP

app.controller("MyCtrl", function($scope, $http) {
  $scope.countries = [];
  $http.get('/path/to/data.json', function(data){
      $scope.countries = data;
  }, function(error) {
     //handle error here
  });
});

回答第1部分：

我不熟悉swig，在快速谷歌之后我注意到这在节点或客户端可用服务器端而且你没有说明你如何使用它。

如果您在服务器端使用它，我建议您查看有关转义某些绑定的文档，以确保页面与html中的绑定一起交付（您可以通过＆＃39;查看页面进行检查chrome中的source＆＃39;选项）。

更新：http://paularmstrong.github.io/swig/docs/api/#SwigOpts 我注意到你可以将varControls绑定设置为＆＃39; {{＆＃39;和＆＃39;}}＆＃39;。

如果您正在使用客户端，那么我会问你为什么需要它...当你尽可能接近完全和独占控制DOM时，angular最有效。我确信在大多数模板引擎中可能发生的任何事情都可以通过更多的学习和训练来实现，如果你只是做一些谷歌搜索，就有足够的资源。

希望这有帮助。

Answer 2

您可以使用interpolateProvider服务更改开始和结束插值标记。

angular.module('myApp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
    }
);

http://docs.angularjs.org/api/ng.$interpolateProvider

Angular和JSON语法与{}混淆

2 个答案: