请注意，我是这方面的完整入门者。我正在通过维护和扩展现有项目来试用Python和AngularJS。我在找出导致项目错误的原因时遇到了问题。在AngularJS的下拉选择中添加显示/隐藏两个不同的div之前，它已经正常工作。它返回
CSRF验证失败
我提交表单时。
register.html：
<div id="charkilla" ng-controller="charkilla">
<div id="blank-ch-form-container"></div>
<div class="charkilla-form-wrapper" ng-repeat="ch in charkillas track by $index">
<form method="post" action="{% url 'charkilla-create' %}" ng-submit="submit($event)">
{% csrf_token %}
<input type="hidden" name="reg" id="id_reg" value="{{ registrationid }}" />
<input type="hidden" name="id" ng-value='ch.id' />
<fieldset ng-disabled="ch_form_disability_{[{ $index }]}">
<div class="row">
<div class="col-md-5">
<div style="margin-top: 10px" class="input-group">
<span class="input-group-addon">दिशा*</span>
<select name="ch_direction" class="form-control" ng-model="ch.ch_direction">
<option value="n">उत्तर</option>
<option value="e">पुर्व</option>
<option value="s">दक्षिण</option>
<option selected="selected" value="w">पश्चिम</option>
</select>
</div>
</div>
<div class="col-md-5">
<!-- Removed map_sheet_no for temporary
<div style="margin-top: 10px" class="input-group">
<span class="input-group-addon">तर्फ़*</span>
<select name="ch_direction_through" class="form-control" ng-model="ch.ch_direction_through">
<option value="front">Front</option>
<option value="back">Back</option>
<option value="left">Left</option>
<option selected="selected" value="right">Right</option>
</select>
</div>
-->
</div>
<div class="col-md-2 remove-killa-wrapper">
<a class="remove-killa" ng-click="removeKilla($event, true, ch.id)"><span class="glyphicon glyphicon-remove"></span></a>
</div>
</div>
<div style="margin-top: 10px" class="input-group col-md-5 ">
<span class="input-group-addon">लेन्डस्केप टाईप*</span>
<select name="ch_landscape_type" class="form-control" ng-model="ch.ch_landscape_type">
<option value=''>Select</option>
<option value="road">सडक </option>
<option value="main_road">मूख्य सडक</option>
<option value="dead_end_road">मुख्य (सडक डेड इन्ड भएको)</option>
<option value="ghar">घर</option>
<option value="land">जग्गा</option>
<option value="school">स्कूल</option>
<option value="temple">मन्दिर</option>
<option value="party_palace">पार्टी प्यालेस</option>
<option value="wall">पर्खाल </option>
<option value="chowk">चोक छ</option>
<option value="pokhari">पोखरी</option>
<option value="river">नदि</option>
<option value="rajkulo">राजकुलो</option>
<option value="public_land">सार्वजनिक जग्गा</option>
<option value="college">कॉलेग</option>
<option value="gumba">गुम्बा</option>
<option value="gl_road">जी एल रोड (बाटो नखुलेको)</option>
<option value="well">कुवा</option>
</select>
</div>
<div style="margin-top: 10px" class="input-group col-md-5">
<span class="input-group-addon">नाम</span>
<input type="text" name="ch_name_np" class="form-control nepalify" placeholder="नाम" ng-model="ch.ch_name_np" />
<input type="text" name="ch_name_en" class="form-control" placeholder="Name" ng-model="ch.ch_name_en" />
</div>
<div style="margin-top: 10px" class="input-group col-md-5">
<span class="input-group-addon">कित्ता</span>
<input type="text" name="ch_kitta" class="form-control nepalify" ng-model="ch.ch_kitta" />
</div>
<div style="margin-top: 10px" class="input-group col-md-5">
<span class="input-group-addon">Actual Setback</span>
<input type="text" name="ch_actual_setback" class="form-control nepalify" placeholder="Actual Setback (m)" ng-model="ch.ch_actual_setback" />
</div>
<div style="margin-top: 10px" class="input-group col-md-5">
<span class="input-group-addon">Standard Setback</span>
<input type="text" name="ch_standard_setback" class="form-control nepalify" placeholder="Standard Setback (m)" ng-model="ch.ch_standard_setback" />
</div>
<div style="margin-top: 10px" class="input-group col-md-5 nepalify" ng-show="ch_landscape_type == 'road' || ch_landscape_type == 'main_road' || ch_landscape_type == 'dead_end_road'">
<span class="input-group-addon">Road width</span>
<input type="text" name="ch_roadwidth" class="form-control" placeholder="Road width (m)" ng-model="ch.ch_roadwidth" />
</div>
<div class="form-button"><input type="submit" class="btn btn-primary" value="save" ng-show="!ch_form_disability_{[{$index}]}" /></div>
</fieldset>
</form>
<div class="form-button"><input type="button" class="btn btn-primary" value="edit" ng-show="ch_form_disability_{[{$index}]}" ng-click="edit($event, $index)" /></div>
<hr />
</div>
<div class="add-more-link add-form-control" ng-click="addKilla($event)">Add another</div>
</div>
</div>
charkilla.js：
app.controller("charkilla", function($scope, $compile, $http, $sce, HouseOwnerData, $rootScope) {
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
if (charkillas.length == 0) {
angular.element("#blank-ch-form-container").append($compile("<killa></killa><killa></killa><killa></killa><killa></killa>")($scope))
}
//Values that are passed to killa.html angularjs template
$scope.actionurl = ch_form_action_url;
$scope.csrftoken = $sce.trustAsHtml(angular.element("input[name=csrfmiddlewaretoken]")[0].outerHTML);
$scope.registrationid = registrationid;
$scope.charkillas = [];
for (idx in charkillas) {
//Update ids in the HouseownerData
HouseOwnerData.push_data('charkilla_id', charkillas[idx].pk);
charkillas[idx].fields['id'] = charkillas[idx].pk;
$scope.charkillas.push(charkillas[idx].fields);
$scope['ch_form_disability_' + idx] = true;
}
$scope.addKilla = function(event) {
angular.element(event.target).before($compile("<killa></killa>")($scope));
};
$scope.change_landscape_type = function(event, land_scape_tp) {
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_name_np = '-';
$scope.ch_name_en = '-';
$scope.road_type = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.ch_name_en = $scope.ch_name_en;
$scope.road_type = false;
}
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_kitta = '-';
$scope.kitta = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.kitta = false;
}
}
$scope.removeKilla = function(event, b_instance_delete, ch_id) {
if (b_instance_delete) {
vex.dialog.confirm({
message: 'Are you sure you want to delete this? ' + ch_id,
callback: function(value) {
if (value) {
console.log("Delete confirmed");
$http({
method: "POST",
url: '/registration/charkilla-delete/' + ch_id + '/',
}).success(function($response) {
console.log("Deleted");
angular.element(event.target).parents(".charkilla-form-wrapper").slideUp(1000, function() {
$(this).remove();
});
}).error(function($error) {
console.log($error);
vex.dialog.alert(JSON.stringify($error));
})
} else {
console.log("Delete not confirmed");
}
}
});
} else {
angular.element(event.target).parents("div[class=killa]").slideUp(1000, function() {
$(this).remove();
});
}
};
$scope.submit = function($event) {
$event.preventDefault();
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_name_np = '-';
$scope.ch_name_en = '-';
$scope.road_type = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.ch_name_en = $scope.ch_name_en;
$scope.road_type = false;
}
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_kitta = '-';
$scope.kitta = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.kitta = false;
}
$http({
method: 'POST',
url: $event.target.attributes['action'].value,
data: angular.element($event.target).serialize()
}).success(function($response) {
HouseOwnerData.push_data("charkilla_id", $response.id);
console.log(HouseOwnerData.get_data());
angular.element($event.target).children('fieldset')[0].disabled = true;
$rootScope.$broadcast('rootScope:redraw_indicator', $response);
}).error(function($error) {
console.log($error);
vex.dialog.alert(JSON.stringify($error));
});
}
$scope.edit = function($event, $index) {
$scope['ch_form_disability_' + $index] = false;
}
});
killa.js：
app.directive("killa", function($compile) {
var directiveDefinitionObject = {
restrict: 'E',
transclude: true,
scope: true,
scope: {
submit: '&', //Passing submit function from parent controller to child directive
// https://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
actionurl: '@actionurl',
csrftoken: '@csrftoken',
registrationid: '@registrationid',
ch_landscape_type: '&',
},
templateUrl: '/static/detail-registration/templates/killa.html',
controller: function($scope, $attrs) {
$scope.change_landscape_type = function(event, land_scape_tp) {
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_name_np = '-';
$scope.ch_name_en = '-';
$scope.road_type = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.ch_name_en = $scope.ch_name_en;
$scope.road_type = false;
}
if (land_scape_tp == 'road' || land_scape_tp == 'main_road' || land_scape_tp == 'dead_end_road') {
$scope.ch_kitta = '-';
$scope.kitta = true;
} else {
$scope.ch_name_np = $scope.ch_name_np;
$scope.kitta = false;
}
}
},
replace: true
};
return directiveDefinitionObject;
});