Проблемы с привязками внутри вложенных директив

Question

Немного справочной информации, которая поможет вам понять проблему: Мы используем angularjs, и мы столкнулись с проблемой относительно того, как мы обрабатываем перевод наших предложений на иностранные языки. Наша текущая настройка выглядит следующим образом:

JS-Directive:

Rohan.directive('translate', ['$filter', function ($filter) { 
    var translateElement = function(element, data, lang){ 
     var results = $filter('I')(element.html(), data, lang); 

     element.html(results.text); 
     if (results.tooltip) element.attr('data-tooltip', results.tooltip); 
    }; 

    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
       translateElement(element, attrs.translate, scope.currentLanguage); 
      } 
     } 
    } 
}]); 

JS-фильтр:

Rohan.filter('I', [function() { 
    return function (key, data) { 
     key = $.trim(key); 

     var string = "..." + key + "..."; 

     try { 
      string = Langfile[currentLanguage][key].value; 
     } catch (e) { 
      console.warn("Translation not found: " + JSON.stringify(key)); 
     } 

     return {"text": string}; 
}; 

Это в основном просто делает поиск в массиве для правильного перевода. Таким образом, проблема мы сталкиваемся, когда этот тег данных перевода вложен в другие директивы, как так:

JS-Problem Директива

Rohan.directive('easydialog', function() { 
    return { 
     restrict: 'E', 
    transclude: true, 
     scope: { 
      text: '@', 
      showDialog: '=', 
      useableButtons: '=', 
      onDialogClicked: '='}, 
     replace: true, 
     template: 
       '<div>' + 
       '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' + 
        '<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')" data-translate>{{useableButton}}</button>' + 
       '</easymodal>' + 
      '</div>' 
    }; 
}); 

Выход:

<button>incorrect_input</button> 

вместо

<button>Your input is incorrect</button> //Or whatever language is selected 

Таким образом, это приводит к угловому разрешению тега преобразования данных f сначала, но в этот момент {{useableButton}} все еще {{useableButton}}, а не значение, которое мы фактически вставляем в это время.

Это можно решить, используя этот фильтр, но мы бы действительно хотели избавиться от него, поскольку это заставляет нас делать разные обходные пути.

Так что я хотел бы видеть это:

1. Начало обработки директивы Easydialog.
2. Измените {{useableButton}} на все, что находится внутри него.
3. Затем запустите шаг перевода данных на все, что находится внутри {{useableButton}}.

Answer 1

Одним из решений может быть использование I фильтра непосредственно в шаблоне директивы, например:

 ... 
     template: 
      '<div>' + 
      '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' + 
       '<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')">{{useableButton | I}}</button>' + 
      '</easymodal>' + 
     '</div>' 

Как об изменении вашей директивы использовать $ интерполировать так:

Rohan.directive('translate', ['$filter', '$interpolate', function ($filter, $interpolate) { 
    var translateElement = function(element, data, scope){ 
     var value = $interpolate(element.html())(scope); 
     var results = $filter('I')(value, data, scope.currentLanguage); 

     element.html(results.text); 
     if (results.tooltip) element.attr('data-tooltip', results.tooltip); 
    }; 

    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
       translateElement(element, attrs.translate, scope); 
     } 
    } 
}]); 

Answer 2

Я думаю, вы можете сделать это, добавив часы на useablebutton, проверьте неопределенное значение и когда он будет скомпилировать вашу кнопку и добавить ее в свой элемент.

Rohan.directive('easydialog', function() { 
    return { 
     restrict: 'E', 
    transclude: true, 
     scope: { 
      text: '@', 
      showDialog: '=', 
      useableButtons: '=', 
      onDialogClicked: '='}, 
     replace: true, 
     template: 
       '<div>' + 
       '<easymodal data-show="showDialog" title="confirm" data-close-function data-dismissable="false" data-modalbig="false">' + 
       '</easymodal>' + 
      '</div>' 
     link: function(scope,element,attrs) { 
      scope.$watch('useablebutton',function() { 
       if (scope.useableButton) { 
         var button = $compile('<button data-ng-repeat="useableButton in useableButtons" data-ng-click="closeWindow(); onDialogClicked(\'{{useableButton}}\')" data-translate>{{useableButton}}</button>')(scope); 
         element.find('easymodal').append(button); 
       } 
      } 
     } 
    }; 
}); 

Answer 3

Вы могли бы хотеть контроль углового перевода - http://pascalprecht.github.io/angular-translate