Angularjs代码不适用于Django答案

【问题标题】：Angularjs code not working with DjangoAngularjs代码不适用于Django
【发布时间】：2017-08-12 20:28:59
【问题描述】：

我想将简单的 angularjs 代码添加到 django。为此，我举了一个简单的例子：我已将以下代码放入我的模板中：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
                $scope.lastName = "Doe";
        });
</script>

<div ng-app="myApp" ng-controller="myCtrl">

        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
<br>
        Full name:{{firstName}}

</div>
</body>
</html>

我的view.py如下：

from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

# Create your views here.
def index(request):
        template = loader.get_template('warlist/index.html')
        return HttpResponse(template.render())

现在，当我运行它时，它会获取文本字段中的名称，但不会打印全名。但是，没有 django，相同的 angularjs 代码也可以正常工作。

【问题讨论】：

标签： angularjs django django-templates django-views

【解决方案1】：

那是因为您使用 Django 模板引擎来渲染 firstName。但它不会通过您的 view 传递，因此 Angular 无法识别它。要“转义”{{ }} 字符并使用 Angular，请执行以下操作：

Full name: {% verbatim %}{{firstName}}{% endverbatim %}

这样 Django 将不会尝试解析 {{ }}，而是使用 Angular 的 {{ }}。详情请查看verbatim。

【讨论】：

伟大的人..它正在工作。如何在views.py中传输firstName和lastName的值。有什么线索吗？我想解析用户在文本部分输入的文本。
为此，最好问一个不同的问题。这就是 SO 的工作原理。 cmets中没有子问题。但是，简而言之，您将创建一个表单（其中将包含 <input> 标签）并向 Django 发出 POST 请求。然后，您的视图将接收 <input>s 的值并适当地处理它们。

【解决方案2】：

Django 模板使用与 angular 相同的插值，即双括号 {{}}。您可以在 config 方法中使用 $interpolateProvider 来更改角度符号，因此它不会与 Django 模板冲突。

module
  .('myApp')
  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
})

那么任何时候你需要在你的视图中插入任何东西：

Fullname: {$ firstName + lastName $}

【讨论】：