gpt4 book ai didi

javascript - Django 不能很好地使用简单的 angularjs,不知道为什么

转载 作者:行者123 更新时间:2023-11-30 12:40:43 25 4
gpt4 key购买 nike

这是我的简单 Angular 应用程序。当我通过浏览器自行运行 html 文件时,变量名称显示为“无”。但是,当我通过制作一个只调用模板的虚拟 View (见下面的 View )将它集成到 django 中时,没有显示变量名。唯一的区别是在使用 django 时,我通过 {% static %} 加载 JS 文件。两者的 html 输出完全相同,除了 django 版本不输出变量名。我已将问题分解为最简单的形式,但似乎无法理解这里发生了什么。

JS 文件在 django 版本中是 100% 加载的。 Chrome 控制台没有显示任何错误。我最初以 Angular 开发了一个简单的应用程序来与我的 django 应用程序集成,但如果这个简单的问题阻碍了我,我将无能为力。

View .py

def home_tester(request):
return render(request, 'angular/base.html')

HTML

<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>

<body>
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
</body>
</html>

应用程序.js

var app = angular.module('ZeTasty',[]);

网格过滤器

app.controller("GridFilter", function($scope){
$scope.name = 'nothing';
});

最佳答案

你需要添加{%verbatim%}{%endverbatim%}标签

django 和 angular 使用相同的 {{}} 标记。通过使用 {%verbatim%} 提示 django,他将忽略 {{}}。这将允许你将 angular 与 django 模板结合起来

例子:

<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>

<body>


<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->

{%verbatim%}
<div id="content" ng-controller="GridFilter">
{{name}}
</div>

{%endverbatim%}

</body>
</html>

关于javascript - Django 不能很好地使用简单的 angularjs,不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24548020/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com