当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Django not working with Angularjs

问题描述:

When I open the file angular.html the angularjs with Chrome, the html work normally, showing the array of information in the table. However, when I use Django, the same angular.html file, angularjs does not show the array of information in the table. I do not know what can I do?

File angular.html

<html ng-app>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

<script>

function tabela($scope){

$scope.linhas2=[["Nexus S1","Oi1"],["Nexus S2","Oi2"],["Nexus S3","Oi3"]]

}

</script>

</head>

<body>

<div ng-controller="tabela">

<table>

<tr ng-model="item2" ng-repeat="item2 in linhas2">

<td ng-repeat="item3 in item2">{{ item3 }}</td>

</tr>

</table>

</div>

</body>

</html>

File views.py

from django.shortcuts import render_to_response

def ang(request):

return render_to_response("angular.html")

File urls.py

from django.conf.urls import patterns, include, url

urlpatterns = patterns('',

url(r'^angular/','bvmfconsulta.views.ang'),

)

The Django finds angular.html but shows a blank page.

网友答案:

The problem is that both Django and AngularJS share the same syntax for variable substitution in templates.

The easiest option would be to tell Django not to use it's syntax in places you need to use angularjs variable substitution - in other words, use verbatim tag:

{% verbatim %}
    <div ng-controller="tabela">
        <table>
            <tr ng-model="item2" ng-repeat="item2 in linhas2">
                <td ng-repeat="item3 in item2">{{ item3 }}</td>
            </tr>   
        </table>
    </div>
{% endverbatim %}

See other options at:

  • Integrate AngularJS with Django
网友答案:

Indeed, you can use the {% verbatim %} tag. There is another way: you can change the AngularJS tags:

var app = angular.module('dashboardApp').config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

Your code will transform to:

<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script>
        function tabela($scope){
            $scope.linhas2=[["Nexus S1","Oi1"],["Nexus S2","Oi2"],["Nexus S3","Oi3"]]               
        }
    </script>
</head>
<body>
    <div ng-controller="tabela">
        <table>
            <tr ng-model="item2" ng-repeat="item2 in linhas2">
                <td ng-repeat="item3 in item2">{$ item3 $}</td>
            </tr>   
        </table>
    </div>
</body>
</html>

This way you can visually distinguish between Angular and Django Template tags. Cheers!

分享给朋友:
您可能感兴趣的文章:
随机阅读: