无法使用角度显示来自 $http 的数据，django答案

【问题标题】：Can't display data from $http get with angular, django无法使用角度显示来自 $http 的数据，django
【发布时间】：2016-11-10 12:08:33
【问题描述】：

我有一个在后端使用 Django 开发的应用程序，其中创建了一个 API，可以使用 Angular 在前端读取信息。

我使用 $http 调用数据库中的人员列表，在函数中我获取数据，并使用 console.log 显示并且是正确的，但是当我使用 ng-repeat 在模板中调用该信息时，内容 div 已创建，但里面的信息不显示，保持空白。

我将不胜感激任何解决此问题的建议。

// custom-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

【问题讨论】：

console.log(key + ': ' + value.email + ' -- ' + value.segment); 它在您的控制台中重现良好吗？
是的，显示所有信息正确

标签： javascript angularjs django

【解决方案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>

【讨论】：

这可能是作者身份的骄傲，但我觉得这是我的答案的劣等解决方案。这是一个不必要的修复，增加了不必要的复杂性，而且ngBind 通常也比{{}} 更可取。 stackoverflow.com/questions/16125872/…
@miyamoto 我以前从未使用过 ng-bind。要看看这个。谢谢！

【解决方案2】：

我认为 Django 模板将 ngRepeat 块中的括号作为 Django 模板的一部分进行解析，而不是将其留给 Angular 控制器。与其在此处使用{{}}，不如使用ngBind 并将ng-bind="card.email" 和ng-bind="card.segment" 属性添加到您的p 标签中？

否则，请在相关角度块周围使用verbatim 标记转义 Django 模板。

【讨论】：