angulaire.js - $.post dans angulaire ne peut pas être lié à $scope (différence d'utilisation entre $.post et $http.post)

Question

Comme indiqué ci-dessous, si la section $scope.equipments=... est placée dans $.post, elle ne peut pas être liée à $scope.equipments. Si elle est placée à l'extérieur, elle peut être liée. Pourquoi ?

mainApp.controller('equipmentsController', function($scope, $http) {
    $.post("getAllDeviceList.action",
            {},
            function(response){
                    $scope.equipments = [ {
                        "id" : "1",
                        "name" : "equipment01 ",
                        "number" : "11"
                    }, {
                        "id" : "2",
                        "name" : "equipment02 ",
                        "number" : "22"
                    }, {
                        "id" : "3",
                        "name" : "equipment03 ",
                        "number" : "33"
                    } ];

            }
    );

    $scope.equipments = [ {
        "id" : "1",
        "name" : "equipment01 ",
        "number" : "11"
    }, {
        "id" : "2",
        "name" : "equipment02 ",
        "number" : "22"
    }, {
        "id" : "3",
        "name" : "equipment03 ",
        "number" : "33"
    } ];

}

Answer 1

Après avoir été rappelé par @lee1994522, j'ai réalisé que si la méthode $.post est utilisée, alors 脱离了angular的上下文 elle ne peut pas être liée au $scope d'angular.

c'est le point, s'il vous plaît.. $.post n'est pas un problème angulaire et tout ça
ça enveloppe n'est pas dans un monde Angular, donc c'est évidemment que le
les équipements extérieurs sont dans le monde d'Angular et cela fonctionne comme prévu

essayez $scope.$apply() lorsque vous appelez un problème "aucun angulaire" si vous le souhaitez
rafraîchir qc

Il existe deux solutions :

$.post

Le premier est, comme l'a dit @lee1994522, d'ajouter directement une phrase $scope.$apply() à la fin de la fonction de rappel $.post pour lier de manière synchrone les modifications apportées à la vue

$.post("xxx.action",
            {},
            function(response){
                if(response.result == "success"){
                    ...
                    }
                    $scope.equipments = equipments; 
                    $scope.$apply();
                }
            },
            "json"
    );

$http.post

AngularJS - Tout moyen pour $http.post d'envoyer des paramètres de requête au lieu de JSON

Défini globalement :

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});

Puis écrivez dans le contrôleur :

   $http.post("xxx.action").success(function(response) {  
            ...
            $scope.equipments = equipments; 
    });

Answer 2

Je ne comprends pas l’utilisation de $.post par l’affiche originale. Quel est l'intérêt d'injecter $http

Answer 3

Votre $.post n'est pas une méthode de angular, donc bien que le rappel de publication soit réellement exécuté, angular n'en est pas informé sur la vue. Vous pouvez suivre l'opération d'affectation dans $.post avec une autre phrase $scope.$apply();, et l'opération d'affectation prendra effet.