How to call jQuery fadeIn function with $http.get from an AngularJS function

Question

I tried to call the following jQuery function with $http.get from an AngularJS function.

But call cannot be executed.

The following is the jQuery function

        function msgBar(){
            $http.get("<%=request.getContextPath()%>/msg_in_session")
            .success(function(msg_ssn){
                alert('msg_ssn');
                if(msg_ssn.split("|||::|||")[0]=='S')
                    msg(msg_ssn.split("|||::|||")[1]);
                else    if(msg_ssn.split("|||::|||")[0]=='F')
                    msgF(msg_ssn.split("|||::|||")[1]);
            });
        }

And the following is the Angular JS call

angular.module('myApp', []).controller('MANAGE_SERVICES', function($scope, $http) {
    $scope.editService = function(){
        $("#loadingDiv").fadeIn();
        $http.get("<%=request.getContextPath()%>/manage/service/edit/"+$scope.selectedServiceId+"/"+$scope.editName)
        .success(function(response) {
            $http.get("<%=request.getContextPath()%>/MANAGE_SERVICES_JSON")
            .success(function(response) {
                    $scope.services = response;
                    $("#loadingDiv").fadeOut();
                    msgBar(); //This is the call
            });
        });
    }
});

But the call is not working when I use $http.get. But if this is not used, then this function call works. And this function is working when this is defined in the same angular controller. But I need to call this in other controllers also. So I need to define this like this itself.

if you want to call a function from separate controllers then create a service — Sachila Ranawaka, Mar 10 '17 at 10:50
See [AngularJS Developer Guide - Creating Services](https://docs.angularjs.org/guide/services). — georgeawg, Mar 10 '17 at 21:13
Also see [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6). — georgeawg, Mar 10 '17 at 21:21
Also consider using [ng-show and ng-hide animations](https://docs.angularjs.org/api/ng/directive/ngShow#animations) instead of jQuery fadeIn and fadeOut. For more informationin see, [AngularJS Developer Guide - Animations](https://docs.angularjs.org/guide/animations). — georgeawg, Mar 10 '17 at 21:28
Also review [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — georgeawg, Mar 10 '17 at 21:31

score 1 · Answer 1 · edited Mar 10 '17 at 12:12

Add your $http.get function to a separate service or factory and then include it to your controller to use for manipulating dom. Here's a simple example:

sample factory:

(function(window, angular, undefined) {
'use strict';

/**
 * Wordpress factory
 */

var Wordpress = function($http, gruntEnvConfig) {
    var wp = {};

    wp.baseUrl = gruntEnvConfig.wp + 'wp-json/';

    wp.get = function(endpoint,cb) {
        return $http({
          method: 'GET',
          url: wp.baseUrl+endpoint
        }).then(function successCallback(res) {
            if(typeof cb === 'function') {
                cb(null, res);
            }
            return res;
          }, function errorCallback(err) {
            if(typeof cb === 'function') {
                cb(err);
            }
            return err;
          });
    };

    return wp;
};

Wordpress.$inject = ['$http', 'gruntEnvConfig'];

angular
    .module('ngApp')
    .factory('$wp', Wordpress);
})(window, window.angular);

Here's how you would add it to a controller:

(function(window, angular, undefined) {
'use strict';

var MyAccountCtrl = function($wp) {
var self = this;

$wp.get('wp-api-menus/v2/menus/', function(err, res) {
    if(err) {
        return;
    }

    self.menus = res;
});

};

MyAccountCtrl.$inject = ['$wp'];

angular.module('ngApp')
 .controller('MyAccountCtrl', MyAccountCtrl);
})(window, window.angular);

Hope it helps.

RIYAJ KHAN · Answer 2 · 2017-03-10T12:33:26.037

You must use factory/services.

Your service :

 factory('myFact',function($scope){
        var services = {};
        services.msgBar =  function(){
                $http.get("<%=request.getContextPath()%>/msg_in_session")
                .success(function(msg_ssn){
                    alert('msg_ssn');
                    if(msg_ssn.split("|||::|||")[0]=='S')
                        msg(msg_ssn.split("|||::|||")[1]);
                    else    if(msg_ssn.split("|||::|||")[0]=='F')
                        msgF(msg_ssn.split("|||::|||")[1]);
                });
            }
            return services;
    })

controller :

angular.module('myApp', []).controller('MANAGE_SERVICES', function($scope, $http,myFact) {
    $scope.editService = function(){
     //your code
        myFact.msgBar(); //This is the call
    }
});

Rafi · Accepted Answer · 2017-03-10T14:22:53.740

You can use angular services

Define your service like this :

angular.module('myApp', []).service('myService', function() {
    this.msgBar = function () {
        //your function code 
    };
});

And use this service in your controller like this :

angular.module('myApp', []).controller('MyController', function($scope, $http, myService) {
    $scope.myFunc = function(){
        //your function code 
        myService.msgBar(); //This is the call
    }
});

How to call jQuery fadeIn function with $http.get from an AngularJS function

3 Answers3