动态创建绑定属性的angular指令内部html重新编译

Question

I am trying to simplify the code below, which is inside angular controller, dynamically adds attribute and recompiles directive inner html.

additionalInfo: '=',

This attribute enables parts of the code in a template, so it must be recompiled while being dynamically created

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

The code works fine, I am trying to distill the code to minimum, any thoughts? Maybe something can be replaced to look nicer?

I have got two more options, which yield the same result:

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

All of them work correctly, but the last one is actually returning an object, but this still works? How? Why? Pros/Cons?

Answer 1

First off why are you recompiling the elements in the DOM? I ask as there is likely a better solution.

Secondly, both of the solutions you propose do not work. Yes, they appear to give you the same results as what was displayed however if you were using two-way binding you lost that can cannot get it back.

Such that once <div>{{value}}</div> is resolved it will forever be the resolved values <div>SomeValue</div> .

To recompile the code exactally as it was then you need to precompiled DOM, which is only available in a directives compile function. You would need to store off that uncompiled HTML and when something occurs change it and rebuild it.

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