Django中使用AngularJS的注意事項
阿新 • • 發佈：2018-11-23
變數標籤衝突
在Django中使用{{}} 來包裹後臺傳到前端的變數名，而在AngualrJS中也是使用{{}},來包裹變數名，所以在html中一起使用會有衝突， 解決辦法：1.Django中可以使用{% verbatim %}{% endverbatim %}來包裹使用AngualrJS的變數的HTML程式碼，這樣被{% verbatim %}包裹的html程式碼中使用 {{}} 就不會被Django認為是Django的變量了。
2.設定改變AngularJS的的變數標籤，如下所示:
var app = angular.module('myApp', []).config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); });
這樣的設定的話使用AngualrJS的變數就由 {{ example }} 變為了 [[ example ]],推薦這樣使用。
關於$.Ajax()和$.post()的使用注意
在angualrjs的函式中使用post方法或者Ajax方法的時候需要注意: 在post方法或Ajax方法獲取到後臺的資料後 賦值給Angualrjs的變數不會立即生效， 也就是說不會立即改變angualrjs變數的值，需要在最後寫上 $scope.$apply().
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>測試</title> {% load static %} <link rel="stylesheet" href="{% static 'shop/css/bootstrap.min.css'%}" > <script src="{% static 'shop/js/jquery-3.2.1.min.js' %}"></script> <script src="{% static 'shop/js/angular.min.js' %}"></script> <script> //控制器,改變angularjs的標籤，或者使用djagno的 verbatiml 來取消 var app = angular.module('myApp', []).config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); app.controller('myCtrl', ["$scope","$http", function (scope,http) { scope.score = function(){ //post的方法點選第二次才會賦值給Angularjs變數，不知道為什麼。--->沒有立即應用變數所以才會導致錯誤出現 $.post("/shop/one/", {name:"小米"}, function (msg) { scope.data = JSON.parse(msg); //立即使用變數 scope.$apply() }) }; }]); </script> </head> <body class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="container"> <div class="row" style="padding-top: 20px"> <div class="col-sm-6 col-md-4" ng-repeat="x in data"> <div class="thumbnail"> <img src="/static/shop/img/[[x.fields.img]]"> <div class="caption"> <h4>[[ x.fields.describe ]]</h4> <p align="center"><a href="#" class="btn btn-primary" role="button">加入購物車</a></p> </div> </div> </div> <button class="btn btn-success" ng-click="score()">點選</button> </div> </div> </body> </html>
上面程式碼中的JSON.paser()是將字串解析為json資料，
後臺資料最好序列化，這樣更方便在AngularJS中使用：
from django.core import serializers def one(request): if request.method == "POST": name = request.POST.get("name") data = Exam.objects.filter(name=name) str = serializers.serialize('json', data) return HttpResponse(str) return render(request, 'shop/search1.html')
。。。。。。