好的,这是一组非常独特的情况,但我正在尝试使我的应用程序未来证明。我正在使用提供模态功能的应用程序框架的基础,但我宁愿使用标准的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以外的内容,但是使用开箱即用的对话框后它将无法正常工作。那么实现这一目标的最佳方法是什么?