Question

我在bootstrap模式中有一些form和div，当点击div时会添加一些css类来改变外观，并在表单中输入一些内容，现在当我关闭模态并再次打开表单输入并添加css类仍然存在，我希望每当模态打开时，它应该是一个新的。所以我找到了解决方案：

$('#modal).on('hidden',function(){
     $(this).removeData('modal')
})

这个想法是Bootstrap会在modal（）第一次触发时实例化一个模态，并向模态元素添加一些数据模态，当下一个modal（）触发时，它只显示隐藏的旧模态实例，而不是创建新的，所以上面的方法尝试删除数据模态属性并强制Bootstrap实例化一个新的模态。

但它似乎不会有角度，这就是我所拥有的：

 <div class='row' >
    <div class='span14' >
        <div data-new-modal='new_item_modal' id='new_item' class='item' >create</div>
    </div>
</div>

<div id='new-item-modal' data-item-modal>
     // modal body
</div>

角

directive.newItem = function(){
    return {
        restrict:'A',
        link:function(scope,element,attrs){
            element.bind('click',function(){
                $('#'+attrs.newItem).modal();
            });
        }
    };
};

directive.itemModal = function(){
    return {
        restrict:'A',
        link:function(scope,element,attrs){
            element.on('hidden',function(){
                console.log(element.data('modal'))
                                    element.removeData('modal') // wont work
                //scope.$apply(element.removeData('modal')) wont work either
                console.log(element.data('modal'))
            })
        }
    }
};

任何想法如何以角度重置bootstrap模式？

我发现即使我刷新页面，模式仍然保持不变！

Answer 1

~~查看javascript插件代码。工具提示和弹出框都有一个销毁功能。由于某种原因，模态缺乏这样的功能。~~

尝试向模态插件添加销毁功能或以相同方式销毁模态：

, destroy: function () { this.hide().$element.off('.' + this.type).removeData(this.type) }

<击>

Callback function after tooltip / popover is created with twitter bootstrap?向您展示了如何扩展插件功能。在这种情况下，您可以扩展hideModal函数。

var tmp = $.fn.modal.Constructor.prototype.hideModal; $.fn.modal.Constructor.prototype.hideModal = function () { tmp.call(this); /*reset your modal here */ }

隐藏模态后，您可以重置表单输入并删除该类。有关示例，请参阅：http://bootply.com/66189。

如果你使用angularjs在你的dom中插入一个新模态，每次你可以使用上面的方法在hide上删除它。

在Angularjs中重置Twitter的Bootstrap 2.x模式

1 个答案: