0

我是 Angular 的新手，并试图将它集成到我的应用程序中。我正在尝试使用一个简单的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

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

谢谢

更新

我想从 .JSON 文件中检索数据

更新跟随大卫比奇的推荐

应用树：

- 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 中显示的错误：“NetworkError: 404 Not Found - http://localhost:8000/resources/data/countries-data.json”

4

2 回答 2

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 中的绑定一起交付（您可以通过 chrome 中的“查看页面源”选项进行检查）。

更新：http : //paularmstrong.github.io/swig/docs/api/#SwigOpts 我注意到在这里您可以将 varControls 绑定设置为除“{{”和“}}”之外的其他内容。

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

希望这可以帮助。

于 2014-04-16T16:25:11.137 回答
0

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

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

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

于 2014-04-16T15:42:42.360 回答