Javascript 如何在AngularJS组件中使用$translate？

我正在尝试在AngularJS组件中使用$translate.proposedLanguage（），它允许我初始化和配置intl tel输入插件：

function customTel() {
return {
    restrict: 'A', // restrict as Attr
    require: 'ngModel', // require ngModel from html
    scope: {},
    link: function($scope, $elem, $attrs, $ctrl) {

        var ngModelCtrl = $ctrl; // access to ngModel with $ctrl

        var lenguaje = $translate.proposedLanguage() || $translate.use();

        if (lenguaje === "es") {
            lenguaje = "ES";
        } else if (lenguaje === "en") {
            lenguaje = "GB";
        } else if (lenguaje === "pt-pt") {
            lenguaje = "PT"
        }

        $elem.intlTelInput({
            initialCountry: lenguaje,
            preferredCountries: ["ES", "GB", "PT", "US"],
            nationalMode: true,

            utilsScript: "../../webclientes/bower_components/intl-tel-input/build/js/utils.js"
        });

    }
}
}

    angular
        .module('webclientesApp')
        .directive('customTel', customTel);

问题是$language未定义，即使我将其注入控制器：

(function() {
    'use strict';

    angular
        .module('webclientesApp')
        .controller('ContactaController', ContactaController);

    ContactaController.$inject = ['$scope', 'Principal', 'ContactaServiceRest', '$state', '$translate'];

    function ContactaController ($scope, Principal, ContactaServiceRest, $state, $translate) {

...

我曾尝试将其注入link参数或下面的

.directive

中，但迄今为止没有任何效果

---

如何通过组件访问$translate？谢谢

如果您将代码更改为此，它应该可以工作：

angular
.module('webclientesApp')
.directive('customTel', customTel);

customTel.$inject = ['$translate'];

function customTel($translate) {
    return {
        restrict: 'A', // restrict as Attr
        require: 'ngModel', // require ngModel from html
        scope: {},
        link: function ($scope, $elem, $attrs, $ctrl) {

            var ngModelCtrl = $ctrl; // access to ngModel with $ctrl

            var lenguaje = $translate.proposedLanguage() || $translate.use();

            if (lenguaje === "es") {
                lenguaje = "ES";
            } else if (lenguaje === "en") {
                lenguaje = "GB";
            } else if (lenguaje === "pt-pt") {
                lenguaje = "PT"
            }

            $elem.intlTelInput({
                initialCountry: lenguaje,
                preferredCountries: ["ES", "GB", "PT", "US"],
                nationalMode: true,

                utilsScript: "../../webclientes/bower_components/intl-tel-input/build/js/utils.js"
            });

        }
    }
}

---

您需要将依赖项注入到指令函数中，而不是链接函数中。此外，出现注入错误的原因是您可以在angular中启用一个设置，这样做会更好，因为它允许缩小文件。

如果您将代码更改为此，它应该可以工作：

angular
.module('webclientesApp')
.directive('customTel', customTel);

customTel.$inject = ['$translate'];

function customTel($translate) {
    return {
        restrict: 'A', // restrict as Attr
        require: 'ngModel', // require ngModel from html
        scope: {},
        link: function ($scope, $elem, $attrs, $ctrl) {

            var ngModelCtrl = $ctrl; // access to ngModel with $ctrl

            var lenguaje = $translate.proposedLanguage() || $translate.use();

            if (lenguaje === "es") {
                lenguaje = "ES";
            } else if (lenguaje === "en") {
                lenguaje = "GB";
            } else if (lenguaje === "pt-pt") {
                lenguaje = "PT"
            }

            $elem.intlTelInput({
                initialCountry: lenguaje,
                preferredCountries: ["ES", "GB", "PT", "US"],
                nationalMode: true,

                utilsScript: "../../webclientes/bower_components/intl-tel-input/build/js/utils.js"
            });

        }
    }
}

---

您需要将依赖项注入到指令函数中，而不是链接函数中。此外，出现注入错误的原因是您可以在angular中启用一个设置，这样做会更好，因为这样可以缩小文件。

将

function customTel（）

更改为

function customTel（$translate）

。查看更多信息谢谢你的帮助，@george。刚刚尝试了一下，得到了这个错误

错误：[$injector:strictdi]customTel没有使用显式注释，无法在严格模式下调用
。知道为什么会这样吗？我正在检查您提供的答案，但没有提供有关此错误的任何信息：（将
function customTel（）
更改为
function customTel（$translate）
。查看更多信息感谢您的帮助，@george。刚刚尝试了一下，得到了此错误
错误：[$injector:stricdi]customTel未使用显式注释，无法在严格模式下调用
。知道为什么会发生这种情况吗？我正在检查您提供的答案，但没有提供有关此错误的任何信息：（现场！：）我对AngularJS领域非常陌生，我仍然很难理解它是如何工作的。非常感谢George:）))@wickedchild我们都从某个地方开始，我建议大家读一读我对AngularJS的宇宙还很陌生，我仍然很难理解它是如何工作的。非常感谢乔治：）@wickedchild我们都从某个地方开始，我建议大家读一读。