AngularJS: return form to modal cancel?

Question

I am trying to use the AngularJS 1.3.0 new method $rollbackViewValue()in ngModelController to discard form changes in modal pop-ups or save them when I close the modal. I am using BootstrapUI for a service $modal.

I think I'm on the right track, but there is something that doesn't work fine:

In my controller, I have:

   $scope.updateCharge = function (charge) {
        var scope = $scope.$new();
        scope.charge = charge;

        var modalInstance = $modal.open({
            templateUrl: 'client/app/views/providers/charges/updateCharge.html',
            scope: scope
        });

        modalInstance.result.then(function () {
            scope.charge.$save({providerId: providerId, chargeId: charge.id});
        });
    };

In my template, I have the following:

<form name="form" novalidate ng-model-options="{updateOn: 'save',  debounce: {'save': 0 }}" class="form-horizontal" role="form">
    <div class="modal-body">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="chargeName">Name</label>

            <div class="col-sm-9">
                <input type="text" class="form-control" required ng-model="charge.code" id="chargeName"/>
            </div>
        </div>
     </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="form.$invalid" ng-click="form.$broadcast('save'); $close()">Update</button>
        <button class="btn btn-warning" ng-click="form.$rollbackViewValue(); $dismiss('cancel')">Cancel</button>
    </div>

</form>

Generally speaking, this works. When I click cancel, my changes are returned. When I click Refresh, the modal closes, but I do not see my updates in the object scope.charge.

I would expect my object to scope.chargebe updated before the modality closes.

Am I using it wrong ng-model-options?

"", form.$broadcast('save'), , . , $close() , ng-model-options. ?

Answer 1

$rollbackViewValue() , , .

$rollbackViewValue(); reset $modelValue, , .

, ng-model debounced , , , , $viewValue ngModel $ModelValue.

, ngModel $modelValue / /, Angular , .

$rollbackViewValue() , . , , .

- , , , .

_this = this;
this.edit = function() {
    this.modelToEdit = angular.copy(this.originalModel);
}

this.save = function () {
    service.save(modelToEdit).then(function(savedModel) {
        _this.originalModel = savedModel;
    });
}

backup

_this = this;
this.edit = function() {
    this.backupModel = angular.copy(originalModel);
}

this.cancel = function() {
    this.originalModel = this.backupModel;
}
this.save = function() {
    service.save(this.originalModel).then(function(data) {}, function(error) {
       _this.originalModel = _this.backupModel;})

}

Answer 2

:

• ngModelOptions.updatedOn DOM, , , , ..
• $broadcast, .

, - , <button> type="button", "submit" . - .

• ng-model-options .
• type="submit" "" form.$broadcast
• type="button" .

, , plunkr ng-if: http://plnkr.co/edit/m37Fd0NybpnfslNkvJnO

Answer 3

, , , angular 1x "" , . angular 2way, , , , html .

, angular.copy, html. , .

angular.copy. .