Ajax in AngularJS Service

Question

Created an Angular Service:

calculator_app.service('FillOpportunity', function () {
    this.fill_opportunity = function (path,scope) {

        $.ajax({
            url: 'opportunitycalculator/calculator/GetProducts?idstring=' + path,
            type: "GET",
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data)
            {
                scope.opportunity_data = data;
                scope.$apply();

            },
            error: function () {
            }
        });
    };
});

Called the service on ng-change of a dropdown:

FillOpportunity.fill_opportunity($scope.result_path,$scope);

The scope.opportunity_data is binded to the select in UI:

<select id="seloppurtunityproducts" name="selproducttype" multiple="" style="height:300px" ng-model="opportunity_products" ng-options="a for a in opportunity_data"></select>

On ng-Change, Ajax is called when I check in Network of Chrome, but the value is not updated in the select box.

Any inputs?

Kyle · Accepted Answer · 2016-05-11 15:54:57Z

2

Don't use jQuery's ajax. Use the built in $http. Using $http automatically begins the digest cycle of angular's builtin compiler. If you must use jquery... then you'd have to call $scope.$apply(); every time there is a data change.

Service:

calculator_app.factory("calcService", ["$http", function($http) {
    return {
        getItem: function(url, items) {
            return $http.get(url,
                // query string like { userId: user.id } -> ?userId=value
                { params: items });
        }
    }
}]);

Inject the service into your controller and use:

calculator_app.controller("MainCtrl", ["calcService", "$scope", function(calcService, $scope) {
    $scope.opportunity_data = [];

    var payload = {
        idstring: path
    };

    //call the service
    calcService.getItem('path/to/calc/api', payload).then(function(response) {
            $scope.opportunity_data = response.data;
        }).catch(function(response) {
            alert('error' + response.data);
        });
}]);

edited May 11, 2016 at 15:54

answered May 11, 2016 at 15:41

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krishna Prasad Ambaripeta Over a year ago

Thanks KKKK, I will try that but my question is why not? When I do the same thing in local machine it is working, only when I deployed in the production, this is not working. Any pointers there?

Evan Bechtol Over a year ago

@KrishnaPrasadAmbaripeta By using jQuery's ajax calls with angularjs, you are really making more work for yourself and opening up the possibility for data errors (like you are experiencing); the data is being modified outside of the digest cycle. Using the built-in $http library will help you avoid this altogether and bring your code in-line with standard angular practices. Hard to say why it works on one machine and not another, given the limited information here.

Collectives™ on Stack Overflow

Ajax in AngularJS Service

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related