在控制器与服务(AngularJS)之间共享数据

Question

我想建立一个网站，它支持几种语言。所以我想使用AngularJS控制器来控制视图。我已经编写了一些脚本，但是我得到了以下错误: TypeError:无法读取未定义的属性'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

You forget to inject languageService as a dependency in your controller,thats why its throwing that error.

Try this,

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','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 = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])

Answer 2

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

您没有指定languageService

一定是

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

这就是为什么您要获得languageService.getLang的原因是没有定义的，因为您没有为languageService指定任何值，因此getLang不会退出。

所以你的代码会变成：

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 = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])