angularjs - Angular Translate Use with Directive -

here's fiddle link .... trying update content of directive $translate , using controller. there other generic way same thing(link in directive?? ) .if want use same directive in 1 controller approach might not work. how can rid of controllers ?

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 file

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, agree terms , condtions</span>" }  }); demo.config(function ($translateprovider) {    $translateprovider.translations('en', {         product_name: 'name',         terms_conditions:"terms & conditions",         other_terms_conditions: 'other terms & conditions',         agreement: 'yes, agree terms , 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;} 

there's no reason can't use $translate provider in directive. inject dependency. if want remove responsibility controller triggering translation, can use put attributes in html.

example (not tested, close should work):

the html (generalize directive use attribute , use whatever markup want per translated element)

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

the directive (create new scope, use translate service, , bind whatever value put in translated attribute)

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