Директива Angularjs дублирует элементы внутри нее

Question

    (function () {

    'use strict';

    angular.module('product')
        .directive('sampledirective', ['$document') {
                return {
                    restrict: 'E',
                    replace: true,
                    scope: {
                        data: '=',
                        btnClick: '&'
                    },
                    link: function (scope, element, attr) {


                            var compiled = $compile(template)(scope);
                            angular.element(element).replaceWith(compiled);
                            element = compiled;
                        };
               };

        }]);

})();

У меня есть директива, которая заменяет элементы внутри нее. У меня странная проблема, которая заменяет элементы несколько раз в директиве.

Дублирует элементы, показанные ниже жирной линией, что не должно происходить.

angular.element (элемент) .replaceWith (составитель);

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

образец

Фактический

круто круто

ожидается

круто

Answer 1

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

angular.module('product').directive("sampledirective", function ($compile) {
    return {
        template: '',
        restrict: 'E',
        scope: {
            data: "=data",
            btnClick: '&'
        },
        link: function (scope, element, attrs) {
            var template = "<div>foo</div>"
            var compiled = $compile(template)(scope);

            element.replaceWith(compiled);
        }
    }
});