如何在AngularJS上從控制器調用服務上的函數

Question

我試圖從控制器調用服務上的函數，以更新我網站上的主題，具體取決於我所在網站的提供商部分。

我的服務

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”

Answer 1

您沒有返回SetVariables ，請參閱服務定義底部的return語句，該語句應包含您希望可訪問的所有內容。

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

Answer 2

首先你的服務返回一個對象，它不具有任何財產稱為SetVariables ，這就是為什么你得到error.Also 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();
};