Question

有人可以解释如何在MVC项目中使用Angular调用动作？

我设法使用这样的Ajax调用动作：

var app = angular.module('toprightSec', ['ng']);
app.controller('NationalityCtrl', ['$scope', function ($scope, $http) {
$scope.items = [];

var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";

for (var i = 0; i < items.length; i++)
{
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}

$scope.reloadPage = function () { window.location.reload(); }

$scope.getResult = function ($index, item) {

    $.ajax({
            type: 'GET',
            async: true,
            url: 'Login/ChangeOffice',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {
                officeID: $scope.items[$index].guid,
                officeName: $scope.items[$index].name,
            },
            success: function (msg) {
            }
        });
};

}]);

我尝试将其更改为Angular，如下所示：

var AngularModule = angular.module('toprightSec', ['ng']);

AngularModule.service('ApiCall', ['http', function ($http) {

var result;
this.PostApiCall = function (controllerName, methodName, obj) {
    debugger;
    result = $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data, success) {
        result = (data);
    }).error(function () {
        ("Something went wrong");
    });
    return result;
};

}]);

AngularModule.controller('NationalityCtrl', ['$scope', function ($scope, $http, ApiCall) {
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}

$scope.reloadPage = function () { window.location.reload(); }

$scope.getResult = function ($index, item) {

    var obj = {
        'officeID' : '123',
        'officeName' : 'Sample'
    }

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).success(function (data) {

        var data = $.parseJSON(JSON.parse(data));
        $scope.message = data;

    });

};

}]);

我一直收到此错误“PostApiCall”未在浏览器控制台上定义。

知道我在这里做错了什么吗？

感谢。

Answer 1

用户承诺，在完成$ http时返回：

    this.PostApiCall = function (controllerName, methodName, obj) {
        debugger;
        var deferred = $q.defer();
        $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data) {
            deferred.resolve(data);
        });
        return deferred.promise;
    };

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).then(function (data) {
        var data = $.parseJSON(JSON.parse(data));
        $scope.message = data;
    });

Answer 2

好吧，我设法修复它，我发现我的代码有两个问题：

我在两个不同的地方使用$ http，而且我在两个地方都使用了成功。（charlietfl建议的解决方案）
另一个问题是我传递的参数，他们不对。

这是我更新的工作代码：

var app = angular.module('BMSApp', []);

app.factory('ApiCall', ['$http', function ($http) {
var PostApiCall = function (controllerName, methodName) {
    return $http.post(controllerName + '/' + methodName);
};
var GetApiCall = function (controllerName, methodName) {
    return $http.get(controllerName + '/' + methodName);
};
return {
    PostApiCall: PostApiCall,
    GetApiCall: GetApiCall
};
}]);

app.controller('NationalityCtrl', ['ApiCall', '$scope', function (ApiCall,$scope) {         
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}
$scope.getResult = function ($index, item) {
    var result = ApiCall.PostApiCall("Login", "ChangeOffice/?officeID=" + $scope.items[$index].guid + "&officeName="+$scope.items[$index].name).then(function (data) {
        $scope.reloadPage();
    });
};
}]);

感谢大家的帮助。

在MVC中使用Angular的Webservice调用

2 个答案: