Wie verwendet man $ translate in AngularJS-Komponente?

Question

Ich versuche $ translate.proposedLanguage() in einer AngularJS Komponente zu verwenden, die mir die intl-tel-Eingabe-Plugin initialisieren und konfigurieren:

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); 

Das Problem, dass $ ist die Sprache nicht definiert ist, auch wenn ich es in der Steuerung zu injizieren:

(function() { 
    'use strict'; 

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

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

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

... 

ich habe versucht, es in den Verbindungsparametern zu injizieren, oder in den .directive unten, aber nichts hat bisher funktioniert.

Wie kann ich über die Komponente auf $ translate zugreifen? Vielen Dank!

Answer 1

Wenn Sie Ihren Code, um diese Änderung sollte es funktionieren:

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" 
      }); 

     } 
    } 
} 

Sie benötigen Abhängigkeiten in der Richtlinie Funktion und nicht in der Link-Funktion zu injizieren. Der Grund, warum Sie den Injektionsfehler erhalten, liegt auch an einer Einstellung, die Sie im Winkel see the documentation aktivieren können. Es ist auf jeden Fall besser, da die Dateien dadurch verkleinert werden können.