Django 没有检测到 AngularJS
Posted
技术标签:
【中文标题】Django 没有检测到 AngularJS【英文标题】：Django not detecting AngularJS 【发布时间】：2016-10-21 22:01:03 【问题描述】：我有一个 Django 项目（我使用 PyCharm IDE 创建的）。我有两个 html 文件，下面是我在这些文件中的代码。
-- header.html
<!DOCTYPE html>
<html lang="en" >
<head>
<title>This is my title</title>
<meta charset="UTF-8">
% load staticfiles %
<link rel="stylesheet" href="% static 'css/style.css' %" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="% static 'js/script.js' %"></script>
-- home.html
<html ng-app="myApp">
% extends "query/header.html" %
% block content %
<p>Hey what's up</p>
<select name="dropDown" ng-model="data.dropDown" >
% for num in list %
<option value="num">
num
</option>
% endfor %
</select>
<p>You chose: data.dropDown </p>
% endblock %
</html>
在我的home.html 中，我有一个使用<select>tag 创建并使用Python 列表填充的下拉列表。我在我的选择标签中使用ng-model 以获取用户在下拉列表中选择的内容并将其显示在下方，但由于某种原因，当我在下拉列表中选择一个选项时，它没有显示任何内容。
另外，在我的 PyCharm IDE 中，home.html、ng-app 和 ng-model 内被突出显示，我收到一条警告说 Attribute ng-app/ng-model is not allowed here
你能告诉我我在这里做错了什么吗？
【问题讨论】：
【参考方案1】：让我们看看...
在 header.html 中，您似乎没有定义 % block content %。如果没有定义，您的模板将无法继承任何内容。
在 home.html 中有一个额外的 html 包装。你不需要它。事实上，除了导入之外，扩展标签应该是文件中的第一个内容。
如果您打算添加像 this 这样的角度绑定，请确保将可绑定内容包装在 % verbatim % 标记中，因为 django 模板呈现使用相同的语法。
这样说，我会像这样修复你的模板：
标题：
% load staticfiles %
# PLEASE add template tags imports at the beginning of the file #
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<!-- PLEASE ACCURATELY INDENT YOUR CODE!!!! -->
<!-- I hope you have myApp defined in js/script.js file -->
<head>
<title>This is my title</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="% static 'css/style.css' %" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="% static 'js/script.js' %"></script>
<!-- PLEASE FOR GOD\'S SAKE MAKE A COMPLIANT HTML FILE!!!!!! I DONT KNOW WHAT IS THE REMAINING FILE BODY BUT I WILL ADD IT RIGHT NOW IN A MINIMALIST WAY -->
</head>
<body>
% block content %% endblcok %
</body>
</html>
主文件将是：
% extends "query/header.html" %
% block content %
<p>Hey what's up</p>
<select name="dropDown" ng-model="data.dropDown">
% for num in list %
<option value="num"> num </option>
% endfor %
</select>
% verbatim %
<p>You chose: data.dropDown </p>
% endverbatim %
【讨论】：
非常感谢您的解释和代码，现在可以完美运行了。以上是关于Django 没有检测到 AngularJS的主要内容，如果未能解决你的问题，请参考以下文章