使用回调函数将jQuery post转换为有角$ http

Question

I have a angular controller that has a function which adds the html retrieved in post to a container. I can then click on a div within that sets a var result to some data onclick.

<div onclick="var result = {"some":"data", "right":"here"}...

The issue Im having is retaining the callback functions functionality. This is what I am trying to convert.

jQuery.post(url, {
                'callback': "callbackFunctions.setData(result);callbackFunctions.closeDialog();",
                'return_type' : 'json'
            },
            function (json) {
                if (json.success) {
                    jQuery('#template').html(json.message);
                }
            }, 'json');

That snippet is currently using a external set of functions from the angular controller.

var callbackFunctions = {
    closeDialog: function () {
        angular.element('#template').dialog('close');
    },

    SetData: function (result) {
        var scope = angular.element('.variables img:visible').scope().$parent;

        scope.$apply(function(){
            jQuery.extend(true, scope.variables, {
                url: result.url,
                name: result.name,
                thumbnail: result.thumbnail,
                value: result.url
            });
        });
    }
};

I just don't think this is the cleanest solution. It currently works I just cant seem to convert this to angular's $http request and get the callback functions to work. Ideally this would be $http.post and when calling the functions they would be within the controller so I already have access to the scope.

One gotcha I can not modify the http I am requesting its used in a ton of other areas of the site not yet updated.

Answer 1

Controller

$http.post(url, data).then(function(response){
    $scope.message = response.message;
}, function(error){
    console.log("Error detected : " + error);
})

HTML

<div id="template">
    {{message}}
</div>

I don't really know what you want to do with the API's data but you can use ng-bind or {{variable}} inside your html to display them