element.replaceWith in a custom directive's link only work at first time called

Question

I am new to Angularjs, and don't understand too much behind the scene. Basically I want to create an 'E' kink directive, base on the data in controller I dynamically create the html, like a whole 'table' thing, to replace the directive.

The directve in my html file is like this:

<matrixrows></matrixrows>

My directive code is like this:

angular.module('matrix', [.....])
.directive('matrixrows', [..., function (...) {
        return {
            restrict: 'E',
            replace: true,
            require: '^matrix',
            link: function (scope, element, attr, ctrl) {
                ......... 
                scope.$watch('currentPage', function (newValue, oldValue) {
                    if (newValue && newValue != oldValue) {

                        var html = "";
                        .......................
                        here is the code to generate the html
                        .......................
                        element.replaceWith(html);
                    }
                });
             }
    }])

Through watching currentPage's change I recreate the html and replace the directive tag. When the first time I change 'currentPage', the element.replaceWith(html) works fine. Then I change 'currentPage angin, the watching function will be triggered, but the element.replaceWith(html) won't work.

Then I stepped into Angularjs source code, I found, after the first time element.replaceWith's execution, element[0].parentNode became null, this caused the replaceWith crash.

Anybody know how to make it work?

Answer 1

It looks like you're attempting to replace the same element several times. But once it's been replaced, it's gone. To solve this store the currentHtml in a variable. Something like this:

        link: function (scope, element, attr, ctrl) {
            ......... 
            var currentElement = element;
            scope.$watch('currentPage', function (newValue, oldValue) {
                if (newValue && newValue != oldValue) {
                    .......................
                    var html = "";
                    here is the code to generate the html
                    .......................
                    var replacementElement = angular.element(html);
                    currentElement.replaceWith(replacementElement);
                    currentElement = replacementElement;
                }
            });
         }

Answer 2

You should be using $compile(...) on the generated html string.

ex:

    link: function (scope, element, attr, ctrl) {
        ......... 
        var currentElement = element;
        scope.$watch('currentPage', function (newValue, oldValue) {
            if (newValue && newValue != oldValue) {
                .......................
                var html = "";
                here is the code to generate the html
                .......................
                var replacementElement = $compile(html)(scope);
                currentElement.replaceWith(replacementElement);
                currentElement = replacementElement;
            }
        });
     }