在Django模板系统中使用ng-include Angular

Question

我正在使用Django和Angular。

在我的Angular范围内，我有：

$scope.templates = [
    { name: 'addSongTemplateAjax', url: "templates/add_song_for_ajax.html"}, 
    { name: '', url: ''}
];
$scope.template = $scope.templates[0];

在我的HTML文件中，我有：

<div class = "add_song_submit_form" ng-include="template.url">
</div>

所以，我想从JavaScript的Angular部分加载模板add_song_for_ajax.html，但这不行。Django给我抛出了一个404错误。我知道这是因为我们在urls.py中找不到这个网址……

所以我确定我需要处理我应用的设置和urls.py，以告诉Django，客户端可以加载这个文件！但是我找不到怎么做。

我想加载的模板是：

<div class="alert alert-info" style = "margin-bottom:10px!important; margin-top:10px;">The song will be added to the playlist selected <strong>//playlist_selected.fields.name//</strong></div>
<form role = "form">
    <div class="form-group">
        <label for = "artist_band">Artist / Band</label>
        <input class="form-control" id="artist_band" placeholder = "Enter artist / band">
    </div>
    <div class="form-group">
        <label for="Title">Title / Song name</label>
        <input type="text" class="form-control" id="title" placeholder="Title / Song name">
    </div>
    <div class="form-group">
        <label for = "url">Url</label>
        <input class="form-control" id="url" placeholder = "Url">
    </div>
        <button type="submit" class="btn btn-default" ng-click = "submit_add_song()">Submit</button>
</form>

有什么想法吗？

Answer 1

这些动态模板是纯粹的AngularJS，还是也需要Django的上下文呢？

---

1. 仅仅是Angular

如果这些模板不需要Django的上下文或模板标签，那你可以把它们当作静态文件来处理。把它们放在你的STATICFILES目录里。

然后你可以通过给Angular提供这些模板的完整网址来加载它们（比如使用{% static 'templates/add_song_for_ajax.html' %}的输出）。

Angular的AJAX应该能顺利加载这些静态HTML文件。

不过，这种方法的一个缺点是，如果你在Django的设置中更改了STATIC_URL，那么在你的JS中也需要做相应的更改。

2. Angular加Django

如果你的动态模板需要Django的上下文，那你就应该把这些模板写成Django模板，编写相应的视图，并配置你的urls.py。

然后你可以在你的JS中使用配置好的网址来指向那些Django的URL。

别忘了Django和AngularJS之间可能会有模板标签冲突的问题。可以查看一下这个链接：AngularJS与Django - 模板标签冲突。

Answer 2

你需要在Django的URL列表中输入模板。可以查看更新后的答案，了解如何在Django的urls.py中直接访问模板，具体可以参考这个链接：如何在Django的urls.py中直接访问模板？，里面有示例和简要说明。根据你在urls.py中写的内容，你可能需要在客户端模板类中去掉URL中的“templates/”。

Answer 3

你应该把你的网址用单引号包起来，具体可以参考文档

$scope.templates = [
    { name: 'addSongTemplateAjax', url: "'templates/add_song_for_ajax.html'"}, 
    { name: '', url: ''}
];