javascript - AngularJS:数据绑定(bind)生成空 HTML 标签(Django 冲突)

Question

我正在尝试从 API 获取一些数据，并根据返回的数据生成导航栏。

看起来 Angular 已成功将新元素添加到 DOM，但它们是空的。我已经验证从 API 返回的数据是正确的，并且符合我的预期。更奇怪的是，代码在我的本地计算机上运行，​​但在部署期间(在远程服务器上)失败。

你知道 Angular 如何/为什么会生成空的 HTML 标签，而不是用正确的数据填充它们吗？

编辑:我找到了这个问题。原来这是由 Django/Angular 冲突引起的。

相关代码如下:

sidebarCtrl.js

(function() {
    var ppApp = angular.module('ppApp');

    ppApp.controller('sidebarCtrl', function($scope, $http) {
        $scope.categories = {
            'Foo': [],
            'Bar': [],
            'Spam': [],
            'Eggs': [],
        };

        $http.get('/api/items/').success(function(data) {
            for(var i = 0; i < data.length; i++) {
                switch(data[i].category) {
                    case 1:
                        $scope.categories['Foo'].push(data[i]);
                        break;
                    case 2:
                        $scope.categories['Eggs'].push(data[i]);
                        break;
                    case 3:
                        $scope.categories['Spam'].push(data[i]);
                        break;
                    case 4:
                        $scope.categories['Bar'].push(data[i]);
                        break;
                } 
            }
        });
    });
})();

sidebar.html

<div id="sidebar" ng-controller="sidebarCtrl">
    <div ng-repeat="(key, val) in categories">
        <div class="header">{{ key }}</div>
        <ul class="spam">
            <li ng-repeat="category in val | orderBy:'short_name'"><a href="#category/{{ category.id }}/">{{ category.short_name }}</a></li>
        </ul>
    </div>
</div>

Answer 1

发现:在远程服务器上，前端是通过 Django 部署的。 Django 的模板标签和 Angular 模板标签都是 {{ }}。这引起了冲突。由于 Django 首先处理 HTML，它删除了导致 Angular 渲染空 HTML 元素的模板标签。

我找到的解决方案是将我的前端包装在 {% verbatim %} 标记中。这让 Django 知道我们不想处理这个 block 。