Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

share|improve this question
1  
if you want to call a function from separate controllers then create a service – sachila ranawaka Mar 10 at 10:50
    
I don't see any jQuery in that code. – JLRishe Mar 10 at 11:35
    
See AngularJS Developer Guide - Creating Services. – georgeawg Mar 10 at 21:13
    
Also see Why are angular $http success/error methods deprecated? Removed from v1.6?. – georgeawg Mar 10 at 21:21
1  
Also review “Thinking in AngularJS” if I have a jQuery background?. – georgeawg Mar 10 at 21:31
up vote 1 down vote accepted

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
    }
});
share|improve this answer
up vote 1 down vote

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.

share|improve this answer
up vote 1 down vote

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
    }
});
share|improve this answer

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.