Angular-Translate Verwenden, die mit der Richtlinie

Hier fiddle link .... Ich bin versucht, zu aktualisieren, den Inhalt der Richtlinie mit $translate und über den controller. Es ist eine andere Allgemeine Möglichkeit, das gleiche zu tun(link in der Richtlinie?? ) .Wenn ich Sie benutzen will derselben Richtlinie in einem Controller nur dann dieser Ansatz kann nicht funktionieren.
Im Grunde genommen, wie kann ich loswerden der Controller ?

HTML 

    <terms-conditions conditions="conditions" checked="checked"></terms-conditions>   <br>
    <button class="btn-primary" ng-disabled="!checked" >Submit</button>
      <hr>


</div>

    <div name="info" ng-controller="myCtrl2">
 <terms-conditions conditions="conditions" checked="checked"></terms-conditions>  <br>
       <button class="btn-primary" ng-disabled="!checked">Submit</button>
      <hr>

</div>
</div>

js-Datei

var demo = angular.module('demo', ['pascalprecht.translate']);
demo.directive("termsConditions",function(){
return {
    restrict:"E",
    scope:{
        conditions:'=',
        checked:'='
    },
    template:
    "<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
}

});
demo.config(function ($translateProvider) {
   $translateProvider.translations('en', {
        PRODUCT_NAME: 'NAME',
        TERMS_CONDITIONS:"TERMS & CONDITIONS",
        OTHER_TERMS_CONDITIONS: 'OTHER TERMS & CONDITIONS',
        AGREEMENT: 'Yes, I agree to the terms and condtions ',

    });

    $translateProvider.preferredLanguage('en');

})
demo.controller("myCtrl1", function ($scope, $translate) {
$translate('TERMS_CONDITIONS')
    .then(function (translatedValue) {
        $scope.conditions = translatedValue;
    });

})
demo.controller("myCtrl2", function ($scope, $translate) {
$translate('OTHER_TERMS_CONDITIONS')
    .then(function (translatedValue) {
        $scope.conditions = translatedValue;
    });

})

CSS

span {
font-weight:bold;
}
.terms{font-weight: normal;
width: 500px;
height: 50px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666;
border-width: 1px;}
InformationsquelleAutor future | 2014-09-10
  1. 2

    Gibt es keinen Grund, Sie nicht verwenden können, das $translate-Anbieter in Ihrer Richtlinie. Nur injizieren es als eine Abhängigkeit. Wenn Sie möchten, zu bekommen, entfernen Sie die Verantwortung von der Steuerung für die Auslösung der translation, die Sie verwenden können, setzen Sie einfach diejenigen, die als Attribute in den html-Code.

    Beispiel (nicht getestet, aber dieses ist nahe an dem, was funktionieren sollte):

    Den html-Code (verallgemeinern Sie die Richtlinie zu verwenden, ein Attribut und markup verwenden, was Sie wollen, pro übersetzte element)

    <div translated="TERMS_CONDITIONS">{{text}}</div>

    Der Richtlinie (erstellen Sie einen neuen Bereich, der translate-service, binden und welchen Wert Sie in übersetzt Attribut)

    demo.directive("translated",['$translate', '$scope', function($translate, $scope){
  return {
    restrict:"AEC",
    scope:true,
    link: function(scope, el, attr){
      $scope.text = '';
      $translate('TERMS_CONDITIONS')
        .then(function (translatedValue) {
          $scope.conditions = translatedValue;
        });          
    }
  }
]);
    • Danke Calvin 🙂 ich habe es auf die gleiche Weise. Sorry vergessen zu befestigen, hier die Lösung.
    • Bitte vergessen Sie nicht, markieren Sie die Antwort akzeptiert.
    InformationsquelleAutor Calvin Froedge
Schreibe einen Kommentar