我如何在 AngularJS 上从控制器调用服务上的函数答案

【问题标题】：How do i call a function on a Service from a Controller, on AngularJS我如何在 AngularJS 上从控制器调用服务上的函数
【发布时间】：2018-03-10 02:07:13
【问题描述】：

我正在尝试从控制器调用服务上的功能，以便更新我网站上的主题，具体取决于我所在网站的哪个提供商的部分。

我的服务，

MyApp.service('ThemeService', function() {

    var ThemeProvider = 1; 
    var ThemeArea = "NotSet";

    this.SetVariables = function() {
        switch (ThemeProvider) {
        case 1: 
        default:
            ThemeArea = "Themes/Default";
            break;

        case 2: 
            ThemeArea = "Themes/Provider2";
            break;
        }

        return ThemeProvider;
    };

return {
        ThemeProvider: ThemeProvider,
        getThemeArea: ThemeArea,
    };
});

我的控制器

$scope.loadData = function (input) {
ThemeService.ThemeProvider = 2;
ThemeService.SetVariables();
};

我的想法是，在控制器内部，可以在设置“ThemeProvider”后调用函数“SetVariables”，以更改“ThemeArea”，但我不知道如何从我的控制器调用函数“SetVariables” .

当我尝试时，我得到一个错误

TypeError：对象不支持属性或方法“SetVariables”

【问题讨论】：

标签： javascript html angularjs angularjs-service angularjs-controller

【解决方案1】：

您没有返回SetVariables，请参阅您的服务定义底部有一个返回语句，它应该包含您想要访问的所有内容。

return {
    ThemeProvider: ThemeProvider,
    getThemeArea: ThemeArea,
    SetVariables: SetVariables
};

【讨论】：

【解决方案2】：

首先，您的服务返回一个没有任何名为 SetVariables 的属性的对象，这就是您收到错误的原因。此外，this.SetVariables 将寻找在您的服务中初始化的 ThemeProvider (var ThemeProvider = 1; ) 而不是控制器分配的值。

您的代码应如下所示：

服务：

MyApp.service('ThemeService', function() {

    var _ThemeProvider = 1;
    var _ThemeArea = "NotSet";

    angular.extend(this, {
        SetVariables,
        setThemeProvider,
        setThemeArea,
        getThemeProvider,
        getThemeArea
    })

    function SetVariables() {
        switch (_ThemeProvider) {
            case 1:
            default:
                _ThemeArea = "Themes/Default";
                break;

            case 2:
                _ThemeArea = "Themes/Provider2";
                break;
        }

        return _ThemeProvider;
    };

    function setThemeProvider(val) {
        _ThemeProvider = val;
    };

    function getThemeProvider() {
        return _ThemeProvider;
    };

    function setThemeArea(val) {
        _ThemeArea = val;
    }

    function getThemeArea() {
        return _ThemeArea;
    }

});

控制器：

$scope.loadData = function(input) {
    ThemeService.setThemeProvider(2);
    ThemeService.SetVariables();
};

【讨论】：