django Rest Rahmen Kommentar nicht

Question

Arbeits

i diese Seite erstellt django Rest-Framework, so dass es ohne die Seite zu aktualisieren überhaupt funktioniert,

http://192.241.153.25:8000/#/post/image3

und mit Winkel js Route Funktion war große Auswahl eines Gebäude einzelne Seite App.

aber aus irgendeinem Grund scheint das Kommentarfeld möglicherweise nicht zu funktionieren, weil es in die eckige js-Vorlage eingefügt wird.

es wirft mich csrf Token fehlenden Fehler, obwohl das Token enthalten ist.

Beurteilung durch die Tatsache, dass {% csrf token%} -Tag als Text sichtbar ist, lässt mich denken, dass die eckige Vorlage das Django-Tag nicht lesen kann.

Kann mir jemand sagen, warum das Kommentarformular nicht funktioniert und wie ich das beheben kann?

(function() { 
    angular.module('app', ['ngRoute', 'ngResource']) 
.controller('FilesListCtrl', ['$scope','$http', function($scope, $http) {//this one controller is new 


    angular.forEach($scope.posts, function(_post){ 
    $scope.styles = producePostStyle(_post) 
    }); 
    function producePostStyle(post) { 
    return { "background-image": "url(" + post.image + ")" } 
    } 
$scope.producePostStyle = producePostStyle; 
    $http.get('/api/posts/').then(function (response) { 
       $scope.viewStyle = { 
        background: 'url('+response.data.results.image+')' 
       }; 

    }); 

    $scope.images = []; 
    $scope.next_page = null; 
    var in_progress = true; 

    $scope.loadImages = function() { 
    //alert(in_progress); 
      if (in_progress){ 
      var url = '/api/posts/';//api url 
      if ($scope.next_page) { 
       url = $scope.next_page; 
      } 
      $http.get(url).success(function(data) { 
       $scope.posts = $scope.posts.concat(data.results);//according to api 
       $scope.next_page = data.next;//acccording to api 

       if (($scope.next_page == null) || (!$scope.next_page)) { 
        in_progress = false; 
       } 
      }); 
     } 
    }; 

    $scope.loadImages(); 
}]) 
angular.module('app') 
.controller('profile_image', ['$scope','$http', function($scope, $http) {//this one controller is new 

    $http({ 
    url: '/api/users/profile/', 
    method: "GET", 
    params: {username: 'lifeto'} 
}).then(function successCallback(response) { 
    console.log("Profile Image"); 
    console.log(response); 
    $scope.lifeto_img = response.data; 
}, function errorCallback(response) { 
    console.log("Error fetching profile image!"); 
}); 

}]) 




.directive('whenScrolled', function($document) {//another directive 
     return function(scope, elm, attr) { 
      var raw = elm[0]; 

      $document.bind('scroll', function() { 
       if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
        scope.$apply(attr.whenScrolled); 
       } 
      }); 
     }; 
    }) 
    .config(function($resourceProvider, $routeProvider, $httpProvider) { 
     $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
     $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
     // Don't strip trailing slashes from calculated URLs 
     $resourceProvider.defaults.stripTrailingSlashes = false; 
     $routeProvider 
     .when('/', { 
      template: '<posts></posts>' 
     }) 
     .when('/posts', { 
      template: '<posts></posts>' 
     }) 
     .when('/post/:postId', { 
      template: '<post></post>' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 
    angular.module('app') 
    .constant('API_URL', '/api/posts/'); 
    angular.module('app') 
    .factory('Posts', function($resource, API_URL) { 
     return $resource(API_URL, {format: 'json'}, { 
     queryPosts: { 
      method: 'GET', 
      isArray: false 
     }, 
     getPostInfo: { 
      url: API_URL + ':postId/', 
      method: 'GET', 
      isArray: false, 
      params: { 
      postId: '@postId', 
      format: 'json' 
      } 
     } 
     }); 
    }); 
    angular.module('app') 
    .directive('post', function() { 
     return { 
     restrict: 'E', 
     templateUrl: '/static/post.html', 
     scope: {}, 
     controller: function($scope, $routeParams, Posts) { 
      $scope.post = null; 

      function clean(id) { 
     return id.toLowerCase().replace(/\s/g, "-"); 
     } 

     function _initialize() { 
    Posts.getPostInfo({ 
    postId: clean($routeParams.postId) 
    }) 
       .$promise 
       .then(function(result) { 
        $scope.post = result; 
        console.log(result) 
       }); 
      } 
      _initialize(); 
     } 
     }; 
    }); 
    angular.module('app') 
    .directive('posts', function() { 
     return { 
     restrict: 'E', 
     templateUrl: '/static/posts.html', 
     scope: {}, 
     controller: function($scope, Posts) { 
      $scope.posts = []; 
      function _initialize() { 
      Posts.queryPosts().$promise.then(function(result) { 
       $scope.posts = result.results; 
      }); 
      } 
      _initialize(); 
     } 
     }; 
    }); 
})(); 

Answer 1

Da kannst du

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 

$ http kümmert sich um csrf nehmen.

Jetzt können Sie Daten schreiben $http

$http({ 
    method: 'POST', 
    url: '/url/', 
    data: { 
     "key1": 'value1', 
    }, 
}).then(function successCallback(response) { 
    #do 
    }, 
    function errorCallback(response) { 
    #do 
    }); 

Hinweis verwendet: Dont hier Ajax Beitrag verwenden. Dafür müsst ihr ein paar andere csrf-Sachen machen.