0

私は角度が初めてで、アプリケーション内に統合しようとしています。私は単純なものを使用しようとしていますng-repeat(これは、セットアップされたサンプルプロジェクトで完全に機能します)。ただし、現在のプロジェクトでは、{{ }} を使用して .JSON ファイルからデータをフェッチする Swig テンプレート言語を使用しています。

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 ファイルからデータを取得したい

更新 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 に表示されるエラー:「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 バインディングを '{{' と '}}' 以外に設定できることに気付きました。

クライアント側で使用している場合は、なぜそれが必要なのかを尋ねます.Angularは、DOMを可能な限り完全かつ排他的に制御するときに最適に機能します。ほとんどのテンプレート エンジンで可能なことは、Angular でもう少し学習とトレーニングを行うことで可能になると確信しています。少しグーグルで検索するだけで、そのためのリソースがたくさんあります。

お役に立てれば。

于 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 に答える