$ http get from angular、djangoのデータを表示できません

Question

バックエンドにDjangoで開発されたアプリケーションがあります。フロントエンドの情報を角度で読むことができるAPIが作成されています。

私はデータベース内の人のリストを関数呼び出しで呼び出していますが、データを取得してconsole.logで表示しても問題ありませんが、ng-repeatでテンプレート内の情報を呼び出すと、コンテンツdivが作成されますが、表示されない内部の情報は空白のままです。

私はこれを解決するために任意の渋滞を感謝します。実行後の結果に

//カスタムangular.js

var app = angular.module('SesamoApp', []); 

var URL = '/api/projects/torres-de-monterrey/segmentation/'; 

app.controller('cardsCtrl',['$scope', '$http', function($scope, $http) { 

$scope.cards = [ 
    {email: 'email@correo.com', segment: 'low'} 
]; 

$http({ 
    method: 'GET', 
    url: URL 
}).then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
    /*console.log(response.data);*/ 
    $scope.data = response.data; 

    angular.forEach(response.data, function(value, key){ 
     console.log(key + ': ' + value.email + ' -- ' + value.segment); 
     $scope.cards.push({email: value.email, segment: value.segment}); 
    }); 

    }, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 

console.log($scope.cards); 

}]); 

---

//するlist.html

{% extends "base_app.html" %} 
{% block main-container %} 
    <h1>Actividades de hoy</h1> 
    {% if activities %} 
     {% for activity in activities %} 
      {{activity.activity_type}} 
     {% endfor %} 
    {% else %} 
     <p>No tienes actividades programadas para hoy</p> 
     <hr /> 

     <div class="segmentBlocks"> 
      <div ng-app="SesamoApp"> 
       <div class="cards" ng-controller="cardsCtrl"> 
        <div class="card" ng-repeat="card in cards | orderBy:'segment'"> 
         <p class="email">{{ card.email }}</p> 
         <p class="segment">{{ card.segment }}</p> 
        </div> 
        {{ data }} 
       </div> 
      </div> 
     </div> 
    {% endif %} 
{% endblock %} 

---

スクリーンショット（情報なし）

Screenshot

Answer 1

あなたの角度ブラケットを変更する必要があり{{}}あなたのapp.js.にこの行を追加して{$ $}から

app.config(['$httpProvider', '$interpolateProvider',  function($httpProvider, $interpolateProvider) { 
    $interpolateProvider.startSymbol('{$'); 
    $interpolateProvider.endSymbol('$}'); 
}]) 

は、この

<div class="segmentBlocks"> 
     <div ng-app="SesamoApp"> 
      <div class="cards" ng-controller="cardsCtrl"> 
       <div class="card" ng-repeat="card in cards | orderBy:'segment'"> 
        <p class="email">{$ card.email $}</p> 
        <p class="segment">{$ card.segment $}</p> 
       </div> 
       {$ data $} 
      </div> 
     </div> 
    </div> 

Answer 2

私は、Djangoのテンプレートは、Djangoのテンプレートの一部としてngRepeatブロックであなたのブラケットを解析するのではなく角度コントローラのためにそれを残していると思います。ここで{{}}を使用する代わりに、ngBindを使用し、pタグにng-bind="card.email"とng-bind="card.segment"の属性を追加するのはなぜですか？

それ以外の場合は、verbatimタグを含むDjangoテンプレートを関連する角度ブロックの周りにエスケープします。