我正在尝试使用 django 和 angular js 开发一个简单的网络应用程序。正在尝试集成。所以我在我的 django 中有这个
from django.conf.urls import patterns, include, url
from django.contrib import admin
from sangakanaku.web.models import House, Expense
from django.views.generic import TemplateView
from django.conf import settings
from rest_framework import viewsets, routers
admin.autodiscover()
class HouseViewSet(viewsets.ModelViewSet):
model = House
class ExpenseViewSet(viewsets.ModelViewSet):
model = Expense
router = routers.DefaultRouter()
router.register(r'house', HouseViewSet)
router.register(r'expense', ExpenseViewSet)
class SimpleStaticView(TemplateView):
def get_template_names(self):
return [self.kwargs.get('template_name') + ".html"]
def get(self, request, *args, **kwargs):
# from django.contrib.auth import authenticate, login
# if request.user.is_anonymous():
# # Auto-login the User for Demonstration Purposes
# user = authenticate()
# login(request, user)
return super(SimpleStaticView, self).get(request, *args, **kwargs)
urlpatterns = patterns('',
# url(r'^$', 'sangakanaku.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/', include(admin.site.urls)),
url(r'^(?P<template_name>\w+)$', SimpleStaticView.as_view(), name='web'),
url(r'^api/', include(router.urls)),
url(r'^static/(?P<path>.*)$', 'django.views.static.serve',
{'document_root', settings.STATICFILES_DIRS}
),
)
这是我的 index.html 文件
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script type="text/javascript">
var app = angular.module('KanakuApp', []);
app.controller('KanakuController', function($scope) {
$scope.expenses = [
{"description" : "Milk", "amount" : 20, "bearer" : {"username" : "Selva"}},
{"description" : "Maavu", "amount" : 30, "bearer" : {"username" : "Kumar"}},
{"description" : "Water", "amount" : 40, "bearer" : {"username" : "Mj"}}
];
})
;
</script>
</head>
<body ng-app="KanakuApp" ng-controller="KanakuController">
<div class="container content">
<div class="panel" ng-repeat="exp in expenses">
<ul class="panel-heading">
<li class="panel-title">{{ exp.description }} - {{ exp.amount }}</li>
</ul>
</div>
</div>
</body>
</html>
现在，当我通过 url localhost:8000/index 访问它时，我得到以下输出。
ng-repeat 重复三次，因为数据大小为 3。但是表达式被评估为空字符串。现在奇怪的是，如果我将相同的文件复制到静态 Assets 文件夹并像普通的 html 文件一样加载它，它就可以完美运行。请参见下图。
到底是怎么回事？有人可以帮帮我吗!
最佳答案
发生的事情是 Angular 语法与 django 的模板渲染语法发生冲突。 django 正在尝试评估这些“{{}}”并将其呈现为 html 标签，然后它吐出一些 Angular 无法再拾取的东西。这就是为什么他们在从静态提供服务时工作，因为它不通过 django 的渲染系统，它只是提供文件。
您可能想研究使用 verbatim 标签来排除 html 的一部分被呈现
https://docs.djangoproject.com/en/1.6/ref/templates/builtins/#verbatim
关于javascript - django 奇怪的 Angular js 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22970925/