angular.js - angular裡$.post無法綁定到$scope裡（$.post、$http.post用法區別）

Question

如下所示，如果$scope.equipments=...那一段，放在$.post裡就不能綁定到$scope.equipments上，如果放在外面就可以，這是為什麼？

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

經過@lee1994522 的提醒，意識到如果用了$.post方法，那麼脱离了angular的上下文，所以無法綁定到angular的$scope裡。

this is the point,pls.. $.post is not an Angular issue and the stuff
it wraps is not in an Angular world,so it's obviously that the
equipments outside is in Angular's world and it works as you expect

try $scope.$apply() when you call a "none Angular" issue if you wanna
refresh sth

解決方法有兩個：

$.post

第一個誠如@lee1994522所說，直接在$.post的回調函數的最後加上一句$scope.$apply()，把改變同步綁定到視圖上

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

$http.post

AngularJS - Any way for $http.post to send request parameters instead of JSON

全域裡定義：

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';
});

然後控制器裡面寫：

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

Answer 2

搞不懂樓主用$.post的意義。你注入$http又有何意義

Answer 3

你的$.post不是angular的方法，所以实际上post的回调虽然执行了，但angular在视图上却不知道这件事。你可以在$.post里的赋值操作后面再跟一句$scope.$apply();，那個賦值操作就生效了。