javascript - 使用服务在 Controller 之间共享数据 (AngularJS)

Question

我想建立一个支持多种语言的网站。所以我想使用 AngularJS Controller 来控制 View 。我写了一些脚本，但出现以下错误:类型错误:无法读取未定义的属性“getLang”

这是我的 AngularJS 代码:

var myApp = angular.module('myApp',[]);
myApp.service('languageService' , function() {
    var language = 'en';
    return {
        getLang: function() {
            return language;
        },

        setLang: function(ind) {
              if (ind == 0) {
                  language = 'en';
              } else if (ind == 1) {
                  language = 'ru';
              }
        }
    };
})

myApp.controller('ChangeLangCtrl', ['$scope', function($scope, languageService) {
     $scope.changeLang = function(ind) {
        languageService.setLang(ind);
     }
}])

myApp.controller('NaviCtrl', ['$scope', function($scope, languageService) {
    var currentLang = languageService.getLang();
    if (currentLang == 'en') {
        $scope.menu = ['About Us', 'Service', 'Contacts'];
    } else {
        $scope.menu = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])

那么我的错误可能是什么？我的意思是，我在开头用 en 初始化语言变量。那么为什么 getLang() 函数未定义？

Answer 1

['$scope', function($scope, languageService) 

你没有指定 languageService

一定是

['$scope', 'languageService', function($scope, languageService) 

这就是为什么您得到 languageService.getLang 未定义的原因，因为您没有为 languageService 指定任何值，所以 getLang 没有t 退出。

所以你的代码会变成:

myApp.controller('ChangeLangCtrl', [['$scope', 'languageService', 
function($scope, languageService)  {
     $scope.changeLang = function(ind) {
        languageService.setLang(ind);
     }
}])

myApp.controller('NaviCtrl', ['$scope', 'languageService', function($scope, languageService)  {
    var currentLang = languageService.getLang();
    if (currentLang == 'en') {
        $scope.menu = ['About Us', 'Service', 'Contacts'];
    } else {
        $scope.menu = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])