Question

如何在基于django构建的应用中的AngularJS指令中加载来自templateURL的html。每当我在templateURL变量中提供一些URL时，它就会到达django服务器。我该如何实现呢？我可以在指令中的templateURL变量中给出一个django URL，并在django中呈现HTML吗？这样做的正确方法是什么？

我的指示：

app.directive('test', function()
{
  return{

  restrict: 'E',
  templateUrl: 'test.html'

}});

它到达someURL/test.html的django服务器并返回404。

我能以这种方式实施吗？

app.directive('test', function()
{
  return{
  restrict: 'E',
  templateUrl: 'app/test'

}});

和django urls.py

url(r'^test/$', TemplateView.as_view(template_name='test.html'))

这是一个很好的方法吗？什么是正确的方法？

Answer 1

做一件事：

项目的Crete静态文件夹。

将静态文件夹添加到urls.py

然后在指令中给出url：

templateUrl: 'static/test.html'

Answer 2

取决于。

如果test.html是Django模板，需要在将其发送到Angular之前进行渲染，那么这是一种很好的方法。

否则 - 我建议这样做 - 将Angular模板放在静态文件夹中的子目录中，并通过静态URL引用它们。然后，它们将通过与Angular脚本本身完全相同的机制提供服务。

Answer 3

对不起，但没人提到

http://www.verdantrefuge.com/writing/2013/angularjs-changing-app-path-base-element/

这完全解决了我们的问题：

<base href="{% static 'js/vendor/myapp/app/' %}" />
<script src="js/Module.js"></script>

我们在指令中将templateUrl保持不变：

(function () {
'use strict';
angular

    .module('site.project.app')
    .directive('myDirective', [myDirective])
;
function myDirective() {

    return {
        restrict: 'E',
        replace: true,
        controller: 'MyCtrl',
        templateUrl: 'partials/my-directive.html',
        link: function (scope, elem, attrs) {
        }

   }
}
})();

Answer 4

Angular完全在前端运行，这意味着您看到的任何URL都将被调用和处理，就像在浏览器中键入URL一样。考虑到这一点，您需要在django项目中定义URL，并确保它响应您希望看到的指令。

简而言之，是的，你可以做你提出的建议：定义URL，确保它在浏览器中响应，处理双花括号，因为它会与django的模板语法冲突 - 为此使用templatetag，这就是它。

从AngularJS指令中的templateURL加载html（在django应用程序中）

4 个答案: