Angularjs删除链接函数中的元素

时间:2015-07-31 22:06:09

标签: javascript angularjs

好的,这是一组非常独特的情况,但我正在尝试使我的应用程序未来证明。我正在使用提供模态功能的应用程序框架的基础,但我宁愿使用标准的html5 <dialog>元素。为方便起见,我创建了两个指令,只有在不支持dialog时才会实现。

(function (app, ng) {
    //Don't load if Dialog is supported
    if (document.createElement('dialog').showModal) {
        return
    }

    function dialog(ModalFactory) {
        return {
            restrict: 'E',
            scope: false,
            link: function (scope, elem, attr) {
                if (!scope.modals) {
                    scope.modals = {};
                }
                var config = {
                    id: attr.id,
                    contentScope: scope,
                    template: elem.html()
                };
                elem.remove(); //This Breaks Everything
                scope.modals[config.id] = new ModalFactory(config);

            }
        }
    }

    dialog.$inject = ['ModalFactory'];

    app.directive('dialog', dialog);
})(app, angular);

(function (app, ng) {
    var dialogSupport = (document.createElement('dialog').showModal);

    var modal = {
        restrict: 'A',
        scope: false,
        link: function (scope, elem, attr) {
            elem[0].addEventListener('click', function (e) {
                e.preventDefault();
                var id = attr.activate;
                scope.modals[id].activate();
            })
        }
    };

    var dialog = {
        restrict: 'A',
        scope: false,
        link: function (scope, elem, attr) {
            elem[0].addEventListener('click', function (e) {
                e.preventDefault();
                var id = attr.activate;
                document.getElementById(id).showModal();
            })
        }
    };

    function activate() {
        return (dialogSupport) ? dialog : modal
    }

    app.directive('activate', activate);
})(app, angular);
<dialog id="someDialog">Testing</dialog>

问题在于对话框功能,当我删除元素时,我收到错误并且浏览器崩溃,因为角度处于$digest周期的中间。我需要删除该元素,因为ModalFactory将使用相同的ID创建自己的元素,我将收到另一个错误。另外,我不想用不必要的物品污染我的DOM。

我还考虑过将对话框指令中的标记更改为ID以外的内容,但是使用开箱即用的对话框后它将无法正常工作。那么实现这一目标的最佳方法是什么?

0 个答案:

没有答案