Dismiss form changes on modal close

问题:

OK, so, I have a modal with some form, that should save changes on Save button, but dismiss them on Close button. Save works fine, but Close doesn't dismiss changes.

Here's how the modal opens:

<i class="glyphicon glyphicon-file semi-transparent" data-ng-class="{'semi-transparent': !test.text}" data-toggle="modal" data-target="#testModal"></i>

Here's the modal:

<div class="modal fade " id="testModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">Text</h4>
        </div>
        <div class="modal-body">
            <textarea class="form-control ng-pristine ng-valid ng-touched" rows="9" style="margin-top: 15px;" data-ng-model="test.text"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-blue" data-dismiss="modal" data-ng-click="save()">Save changes</button>
        </div>
    </div>
</div>

Is there a way to dismiss changes on Close, using data-target to open a modal?

回答1:

When you make changes in your textarea, it's saved in your model text.text, it's the two-way binding of Angular. So you will have to add a ng-click="cancel()" on the close button :

<button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="cancel()">Close</button>

And reset your $scope.test.text value to the previous state in that function.

回答2:

Try this

<button type="button" class="close" data-dismiss="testModal">