变量标签冲突
在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')
。。。。。。