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