django奇怪的角度js行为

时间:2014-04-09 18:24:44

标签: javascript django angularjs

我正在尝试使用django和angular js的简单Web应用程序。正在尝试整合。所以我在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访问它时,我得到以下输出。

enter image description here

当数据大小为3时,ng-repeat重复三次。但是表达式被评估为空字符串。现在奇怪的是,如果我将相同的文件复制到静态资源文件夹并像普通的html文件一样加载它,它可以很好地工作。见下图。

enter image description here

真正发生了什么?有人可以帮助我!

1 个答案:

答案 0 :(得分:2)

正在进行的是角度语法与django的模板渲染语法冲突。 django正试图评估和渲染那些&#34; {{}}&#34;作为html标签,然后它会吐出一些角度无法提升的东西。这就是为什么他们在静态服务时工作的原因,因为它没有通过django的渲染系统,它只是服务于文件。

您可能希望使用逐字标记来排除html的一部分被渲染

https://docs.djangoproject.com/en/1.6/ref/templates/builtins/#verbatim