угловая директива внутренняя перекомпиляция html с динамическим атрибутом связывания

Question

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

additionalInfo: '=', 

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

$element.attr('additional-info', "'test'"); 
var template = angular.element('<a></a>').append($element.clone()).html(); 
$element.replaceWith($compile(template)($scope.$parent)); 

код прекрасно работает, я пытаюсь отогнать код к минимуму любой мысли? Может быть, что-то можно заменить, чтобы выглядеть лучше?

У меня еще два варианта, которые дают тот же результат:

var template = angular.element('<a></a>').append($element.clone()).html(); 
var template = $element.get(0).outerHTML; 
var template = $element.html($element.get(0).cloneNode(true)); 

Все они работают правильно, но последний фактически возвращая объект, но это все еще работает? Как? Зачем? За и против?

Answer 1

Прежде всего, почему вы перекомпилируете элементы в DOM? Я спрашиваю, есть ли лучшее решение.

Во-вторых, оба решения, которые вы предлагаете, не работают. Да, они, похоже, дают вам те же результаты, что и в том, что было показано, если вы использовали двустороннюю привязку, которую вы потеряли, что может не вернуть ее.

Такое, что после того, как <div>{{value}}</div> будет разрешено, оно навсегда будет разрешенными значениями <div>SomeValue</div>.

Чтобы перекомпилировать код точно, как это было тогда, вам необходимо предварительно скомпоновать DOM, который равен , доступный в функции компиляции директив. Вам нужно будет сохранить этот несжатый HTML-код, и когда что-то произойдет, измените его и перестройте.

.directive('someDirective', function() { 
    return { 
     compile: function($element, $attrs) { 
      var originalHtml = $element[0].outerHTML; 
      return: function(scope, element, attrs) { 
       // some action occurs 
       var newElement = angular.element(originalHtml); 
       element[0].insertBefore(newElement, element[0].parent); 
       $compile(newElement)(scope); 
      }; 
     } 
    } 
})