代码之家 › 专栏 › 技术社区 › damir

通过使用$resource从angular调用c#webservice来设置控制器变量

angular-resource angularjs json c# javascript

damir · 技术社区 · 9 年前

我在使用来自服务的JSON数据时遇到了问题。后端用c#编写,前端用AngularJS编写。

我无法在角度控制器中使用所需的对象。

所以,这里是我在C语言中的api restful服务#

[Route("v1/environment")]
    public IHttpActionResult GetEnvironment()
    {
        var env = new Environment(WebConfigurationManager.AppSettings["Env"]);
        return this.Ok(env);
    }

下面是我的角度服务:

module.factory('Environment', [
    '$resource',
    function ($resource) {
        return $resource('/MorpheusApi/v1/environment', {}, {
            getEnv: {method: 'GET', isArray: false}
        });

    }
    ]);

然后出于测试目的,我还创建了此服务:

 module.factory('Env', [
    'Environment',
    function (Environment) {
        return {
            getEnv: function () {
                var s = Environment.getEnv();
                var e = angular.fromJson(s);
                return e;
            }
        };
    }
    ]);

然后我会像这样在控制器中使用它:

$scope.envLocal = Env.getEnv();

然后在ui中,使用此

<p>Environment Local: {{envLocal}}</p>
    <p>Environment Local Env: {{envLocal.Env}}</p>

我得到了以下输出,我认为这很好:)

Environment Local: {"Env":"testText"}

Environment Local Env: testText

但是,当我现在想让我们只从控制器向ui提供testText时,我会这样做:

    var result = Env.getEnv();
$scope.envLocal = result.Env;

但这不起作用。。。我也尝试过用angular。toJson。angular。来自Json,但我在UI中没有得到任何东西。为什么?如何在控制器中正确使用该对象,例如,如果我想在if或其他中使用它。。

这是可能的吗?

2 回复 | 直到 9 年前

Community Marino Di Clemente 4 年前

您也可以这样编写工厂,这样就不需要编写两种不同的服务。

module.factory('Environment', ['$resource',
    function ($resource) {
        var api = $resource('/MorpheusApi/:action/:subaction', {}, {
            getEnv: {
                method: 'GET',
                params: {
                   action: "v1",
                   subaction:"environment"
                },
                isArray: false
            }
        });
        return {
            getEnv: function () {
                return api.getEnv().$promise;
            }
        };
    }
]);

之后,您只需将此服务注入控制器,就可以轻松地调用函数。

Environment.getEnv()
                .then(function (response) {
                    //If you wants to perform any logic on response object then you can do here and after that you can assign to scope variable
                    // You can write this logic in service too
                    $scope.envLocal = response;
                });

您可以调用上面所述的服务,因为$resource正在返回promise,您的作用域对象将在成功调用api时设置,无需调用 $scope.$apply() 在这里

假设你有两个不同的

/睡眠Api/v1/环境

/MorpheusApi/v2/环境

您可以根据需要配置两个路由,如调用函数。

module.factory('Environment', ['$resource',
        function ($resource) {
            var api = $resource('/MorpheusApi/:action/:subaction', {}, {
                getEnv: {
                    method: 'GET',
                    params: {
                       action: "v1",
                       subaction:"environment"
                    },
                    isArray: false
                },
                getEnvV2: {
                    method: 'GET',
                    params: {
                       action: "v2",
                       subaction:"environment"
                    },
                    isArray: false
                }
            });
            return {
                getEnv: function () {
                    return api.getEnv().$promise;
                },
                getEnvV2: function () {
                    return api.getEnvV2().$promise;
                }
            };
        }
    ]);

有关配置和理解的更多信息,请阅读 Explanation of configration and working of $resource

dan richardson 9 年前

我认为这是由于您在调用getEnv之后试图设置范围变量。您可能需要使用 angular promise 这样做

像这样的东西有用吗?

var promise = Env.getEnv();
promise.then(function(res) {
    $scope.envLocal = res.Env;
}, function(err) {});

您可能需要将 $scope.envLocal 在 $apply 但也不确定。。。

 $scope.$apply(function () { 
    $scope.envLocal = res.Env; 
 });