Question

我尝试从 AngularJS 函数中使用 $ http.get 调用以下 jQuery函数。

但是无法执行电话。

以下是jQuery函数

        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]);
            });
        }

以下是Angular JS调用

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
            });
        });
    }
});

但是当我使用$ http.get时，调用无效。但是如果没有使用它，则此函数调用有效。当在同一个角度控制器中定义时，此功能正常工作。但我还需要在其他控制器中调用它。所以我需要像这样定义它。

Answer 1

将您的$http.get功能添加到单独的服务或工厂，然后将其包含在您的控制器中以用于操作dom。这是一个简单的例子：

样品工厂：

(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);

以下是将其添加到控制器的方法：

(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);

希望它有所帮助。

Answer 2

您必须使用factory/services。

您的服务：

 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;
    })

控制器：

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

Answer 3

您可以使用角度服务

像这样定义您的服务：

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

在控制器中使用此服务，如下所示：

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

如何使用AngularJS函数中的$ http.get调用jQuery fadeIn函数

3 个答案: