Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite
5

Can I set context in Angularjs $http just like we can do it in jQuery's $.ajax?

define([
    'app'
], function(app) {

    app.controller("controller1", function($scope, $route, $http) {

        return $http({
            method: 'GET',
            url: 'server.php'
        }).then(function(response) {
            $scope.contacts = response.data;
        });
    });
});

Also, there are more callbacks in jQuery's $.ajax, like .done, .promise which I can use them to manipulate the context like this below, I wonder if I can do the same in Angularjs?

$.ajax({
    type:       "GET",
    dataType:   "HTML",
    url:        'server.php',
    context:    $("#container"),
    async:      true,
    beforeSend: function() {

        $(this).html('loading...');
    },
    success: function (returndata, status, jqxhr) {
        $(this).html(returndata).hide().fadeIn();
    },
    }).fail(function() { 
        alert("error"); 
    }).done(function(returndata) {
    },
    .always(function() { 
        alert("complete"); 
    }
});
share|improve this question
1  
I have update my answer for show hide using angular, please take a look :) –  Ramesh Rajendran 3 hours ago
add comment

3 Answers

up vote 3 down vote

Just use Function.bind() on the function you hand to promise.then to maintain the context you want. For example:

return $http({
    method: 'GET', 
    url:'server.php'
}).then(function(response) {
    $scope.contacts = response.data;
}.bind(this));

However, I'm noticing that your callbacks are all manipulating elements--things you don't need to do in Angular. Is there something specific you're trying to do but unable to with a callback?

share|improve this answer
 
thanks Jeff. I only need to do two things like I do in $.ajax - 1. beforeSend: function() { $(this).html('loading...'); } and 2 - success: function (returndata, status, jqxhr) { $(this).hide().fadeIn(); }. –  lauthiamkok 17 hours ago
 
So... yeah, you should instead use a request and response interceptor and show/hide that based on the number of pending HTTP requests. –  Jeff Hubbard 16 hours ago
1  
see my answer pls –  Ramesh Rajendran 2 hours ago
add comment
up vote 1 down vote

You seem to be doing a lot of DOM manipulation. You should let angular do that for you. Already in place are angular promises. Whenever you use a promise the callback will invoke a $digest cycle. Therefore any modifications to your $scope inside a then will be reflected in the DOM

update:

Something like:

app.controller("controller1", function($scope, $route, $http) {
    $scope.getData = function(){
        $scope.loading = true;
        $http.get('server.php').then(function(response){

            $scope.contacts = response.data;
            $scope.loading = false;
        }
    }
});

For animations.. You can use the same boolean probably. See this And check out animation example at the bottom.

share|improve this answer
1  
I mean how angularjs would handle this for me like jquery does $el.hide().fadeIn()? –  lauthiamkok 17 hours ago
1  
@lauthiamkok Yep, But angular can do it different way by using ng-show or ng-hide please see my answer –  Ramesh Rajendran 3 hours ago
1  
Or see this link : jsfiddle.net/KmXTy/1 –  Ramesh Rajendran 2 hours ago
1  
THanks. What a hack for doing this with Angularjs. It is so simple in jquery though. –  lauthiamkok 2 hours ago
1  
@lauthiamkok Yep you can do it jquery. So why you use angular.js? you can do it by using jquery or angular.js . both are best. but angular.js helps to binding fast than jquery. Happy coding :) – –  Ramesh Rajendran 2 hours ago
show 4 more comments
up vote 1 down vote

Both are same

$http is referred from angular.js script

$.ajax is referred from jquery script

  • and $http is does not support async:false

  • $.ajax is support async:false

You can do it by using angular.js in this way

$http.get('server.php').success(function(response) {
            $scope.contacts = response.data;
        }).error(function(error)
    {
//some code    
});

but async: true, is does not support in angular.js.

If you need stop asynchronous callback, then you must use $.ajax way

More details please see this discussion : from jquery $.ajax to angular $http

Edit:

How to show hide in angular js

<div ng-show="IsShow">xx</div>



  $http.get('server.php').success(function(response) {
                $scope.contacts = response.data;
                $scope.IsShow=true;
                $scope.$apply();
            }).error(function(error)
        {
           $scope.IsShow=false; 
           $scope.$apply(); 
    });
share|improve this answer
 
Thanks. Can I know what are ** for? –  lauthiamkok 2 hours ago
 
And what is $apply() for btw? thanks! –  lauthiamkok 2 hours ago
 
@lauthiamkok ** is nothing. it's SO bold line mark. $scope.$apply() means $scope.IsShow=true apply for the Html. But it's maybe don't need. –  Ramesh Rajendran 2 hours ago
 
THanks. I do find jquery method is easier and more straight forward. don't you think? –  lauthiamkok 2 hours ago
1  
@lauthiamkok , Yep you can do it jquery. So why you use angular.js? you can do it by using jquery or angular.js . both are best. but angular.js helps to binding fast than jquery. Happy coding :) –  Ramesh Rajendran 2 hours ago
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.