rafaelcb21 rafaelcb21 - 3 months ago 22
AngularJS Question

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.

Answer

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:

Comments