AngularJS шаблон Replace директива не работает

Question

У меня есть директива шаблонной, что почти работают так, как я хочу, простой вариант работы: -

<div bw-template-replace> 
    <template>This is template text, replace [[#this]] please</template> 
    <this>text replaced</this> 
</div> 

расширяется

<div bw-template-replace><span>This is template text, replace text replaced please</span></div> 

Однако, если я вставлять другим директивы, они не полностью работают, как ожидалось.

Смотрите мой шлепнуть http://plnkr.co/edit/dLUU2CMtuN5WMZlEScQi?p=preview

В конце функции связочной директивы I $ компилировать получившийся текст/узел, который работает для {{сфера интерполированное текст}}, но не работает для встроенных директив, использующих один и тот же объем.

Причина, по которой мне это нужно, потому что я использую ng-translate для существующего ng-приложения, и я хочу использовать существующий английский текст в качестве ключей для поиска перевода. Случай необычного перевода - это то, где мы имеем HTML, как показано ниже (извлечение из приложения), аргументы [[#ageInput]] и [[#agePeriod]] могут появляться в разных местах на других языках, так как я понимаю это -транслят не имеет реальной поддержки для этого сценария в настоящее время.

<div class="row-fluid"> 
    <div class="span12" translate bw-template-replace> 
     <template> 
      If current version of media has not been read for [[#ageInput]] [[#agePeriod]] 
     </template> 
     <ageInput><input type=number ng-model="policy.age" style="width:50px"/></ageInput> 
     <agePeriod><select style="width:100px" ng-model="policy.period" ng-options="p for p in periods" /></agePeriod> 
    </div> 
</div> 

Любая помощь очень ценится.

Мне очень нравится работать в этих сценариях, когда вы новичок в чем-то, потому что это действительно заставляет вас понимать, что происходит. У меня теперь есть работа, в основном моя предыдущая директива, я нашел несколько способов просто заменить html в надежде, что Угловая волшебство разобрала бы все. Теперь я лучше понимаю трансклюзию и, в частности, функцию трансклюзии, я сделал ее работу по своему желанию. Клонированный элемент, переданный в $ transcludeFn, уже имеет прикрепленную область и был скомпилирован, поэтому моя функция теперь анализирует текст шаблона и генерирует отдельные элементы textElement и перемещает элементы аргумента вокруг в соответствии с шаблоном.

мое текущее решение

.directive('TemplateReplace', ['$compile', '$document', '$timeout', 
    function ($compile, $document, $timeout) { 
     return { 
      restrict: 'AC', 
      transclude: true, 
      link: function (scope, iElement, iAttrs, controller, transclude) { 
       transclude(scope, function (clone, $scope) { 
        $timeout(function() { 
         // Our template is the first real child element (nodeType 1) 
         var template = null; 
         for (var i = 0, ii = clone.length; i < ii; i++) { 
          if (clone[i].nodeType == 1) { 
           template = angular.element(clone[i]); 
           break; 
          } 
         } 

         // Remember the template's text, then transclude it and empty its contents 
         var html = angular.copy(template.text()); 
         iElement.append(template);  // Transcluding keeps external directives intact 
         template.empty();     // We can populate its inards from scratch 

         // Split the html into pieces seperated by [[#tagname]] parts 
         if (html) { 
          var htmlLen = html.length; 

          var textStart = 0; 
          while (textStart < htmlLen) { 
           var tagName = null, 
           tagEnd = htmlLen, 
           textEnd = htmlLen; 

           var tagStart = html.indexOf("[[#", textStart); 
           if (tagStart >= 0) { 
            tagEnd = html.indexOf("]]", tagStart); 
            if (tagEnd >= 0) { 
             tagName = html.substr(tagStart + 3, tagEnd - tagStart - 3); 
             tagEnd += 2; 
             textEnd = tagStart; 
            } 
           } 

           // Text parts have to be created, $compiled and appended 
           var text = html.substr(textStart, textEnd - textStart); 
           if (text.length) { 
            var textNode = $document[0].createTextNode(text); 
            template.append($compile(textNode)($scope)); 
           } 

           // Tag parts are located in the clone then transclude appended to keep external directives intact (note each tagNode can only be referenced once) 
           if (tagName && tagName.length) { 
            var tagNode = clone.filter(tagName); 
            if (tagNode.length) { 
             template.append(tagNode); 
            } 
           } 
           textStart = tagEnd; 
          } 
         } 
        }, 0); 
       }); 
      } 
     }; 
    } 
]); 

Answer 1

Если я понял ваш вопрос правильно, я предполагаю, что проблема ваша директива становится выполняется перед нг-повтор готовит dom.So вам нужно сделать DOM-манипуляция в $timeout.

Проверьте этот plunker для примера работы.

Вот хороший объяснение подобной проблемы: https://stackoverflow.com/a/24638881/3292746