Django中使用AngularJS的注意事项

变量标签冲突

在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')

。。。。。。