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知道我们不想处理这个块。

AngularJS：生成空HTML标签的数据绑定（Django Conflict）

1 个答案: