Angular - Как удалить из DOM элемент, который я использовал $compile?

Мне нужна функциональность двух ng-views. Потому что я не могу изменить innerHTML что-то и скомпилировать его. Проблема в том, что когда я снова меняю содержимое, я могу скомпилировать, но angular удалить привязку на нем самостоятельно, или я должен сделать это вручную, если да, то как?

EDIT: Объяснение

Я хочу сделать модальный, содержимое которого я могу изменить и привязать к различным областям (следовательно, компиляция $). Но я не хочу уничтожать весь модальный, только часть его контента и переходить на другой. Мое главное сомнение заключается в том, что, удалив некоторый скомпилированный HTML, это может привести к утечкам памяти.

решаемые

Для этой проблемы я создал новую область с правами пользователя (с $new) и уничтожил ее всякий раз, когда менял контент. Спасибо за все

Ответы

Ответ 1

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

Я также создал методы getter и setter для дочерней области, чтобы избежать поляризации родительской оболочки, если в другом контенте используются одноразовые переменные

Ответ 2

Чтобы вручную удалить элемент, выполните element.remove(). Похоже, вы также хотите уничтожить область вашего скомпилированного элемента, чтобы вы могли сделать это, выполнив scope.$destroy(); или $scope.$destroy(); в зависимости от того, находитесь ли вы в директиве или нет.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Ответ 3

Спасибо за хорошее решение. Я только что опубликовал код реализации

.directive('modal', function($templateCache, $compile) {
    return function(scope, element, attrs) {
        var currentModalId = attrs.modalId;
        var templateHtml = $templateCache.get(attrs.template);
        var modalScope, modalElement;

        scope.$on('modal:open', function(event, modalId) {
            if(modalId == null || currentModalId === modalId) {
                openModal();
            }
        });

        scope.$on('modal:close', function(event, modalId) {
            if(modalId == null || currentModalId === modalId) {
                closeModal();
            }
        });

        function openModal() {
            // always use raw template to prevent ng-repeat directive change previous layout
            modalElement = $(templateHtml);

            // create new inherited scope every time open modal
            modalScope = scope.$new(false);

            // link template to new inherited scope of modal
            $compile(modalElement)(modalScope);

            modalElement.on('hidden.bs.modal', function() {
                if(modalScope != null) {
                    // destroy scope of modal every time close modal
                    modalScope.$destroy();
                }
                modalElement.remove();
            });

            modalElement.modal({
                show: true,
                backdrop: 'static'
            });
        }

        function closeModal() {
            if(modalElement != null) {
                modalElement.modal('hide');
            }
        }
    };
});