Question

index.html：

{% load staticfiles %}

<html ng-app = "myModule">
    <head>
        <script src = '{% static "scripts/angular.js" %}'> </script>
        <script src = '{% static "scripts/application.js" %}'> </script>
    </head>
    <body ng-controller = "myController">
    Table: Message: {{ message }}
    <table>
        <tr ng-repeat = "t in technologies track by $index">
            <td> {{ t.name }} </td>
        </tr>
    </table>
    </body>
</html>

application.js：

// Create a module
var myApp = angular.module("myModule", []);

// Create a controller. Attach model to the scope.
var myContoller = function ($scope, $http, $log) {
    var technologies = [{name: "C", likes: 0, dislikes: 0},
                        {name: "Perl", likes: 0, dislikes: 0},
                        {name: "Java", likes: 0, dislikes: 0},
                        {name: "Python", likes: 0, dislikes: 0}];

    $scope.technologies = technologies;
    $scope.message = 'AngularJS table';
}

// Register the controller with the module
myApp.controller("myController", myContoller);

当我打开index.html时，没有显示来自模型的数据。我缺少明显的东西吗？

我只在这里显示html和controller文件。但是代码是Django项目的一部分。

Answer 1

问题是您混合使用Django模板和角度模板。这意味着如果您写：

{{ t.name }}

这是Django模板渲染 first 解释的。如果存在这样的t（具有name属性或元素），则它将呈现内容。如果不是，它将用空字符串（或您配置的另一个错误字符串）替换。无论用什么替换，{{ t.name }}本身都消失了。

因此，“ Angular模板”（呈现Django模板的最终产品）永远不会看到此标记。但是，有一些机制可以阻止Django解释{{ }}部分（以及其他模板标签）。

您可以使用verbatim template tag [Django-doc]在某些特定部分禁用django模板引擎。因此，将其编写为：

{% load staticfiles %}

<html ng-app = "myModule">
    <head>
        <script src = '{% static "scripts/angular.js" %}'> </script>
        <script src = '{% static "scripts/application.js" %}'> </script>
    </head>
    <body ng-controller = "myController">
    Table: Message: {% verbatim %}{{ message }}{% endverbatim %}
    <table>
        <tr ng-repeat = "t in technologies track by $index">
            <td> {% verbatim %}{{ t.name }}{% endverbatim %} </td>
        </tr>
    </table>
    </body>
</html>

因此，现在{{ t.name }}不会被Django模板引擎评估，它只是将{{ t.name }}呈现为输出。然后可以用“ Angular模板引擎”解释它，并用列表中的值代替。

django-angular documentation包含有关此主题的部分。

AngularJS：ng-repeat不显示数据（混合Django和Angular模板表达式）

1 个答案: