diff --git a/src/ng/directive/ngModel.js b/src/ng/directive/ngModel.js index 6f17f9cc4817..0f07da3e6581 100644 --- a/src/ng/directive/ngModel.js +++ b/src/ng/directive/ngModel.js @@ -448,11 +448,14 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ * which may be caused by a pending debounced event or because the input is waiting for a some * future event. * - * If you have an input that uses `ng-model-options` to set up debounced events or events such - * as blur you can have a situation where there is a period when the `$viewValue` - * is out of synch with the ngModel's `$modelValue`. + * If you have an input that uses `ng-model-options` to set up debounced updates or updates that + * depend on special events such as blur, you can have a situation where there is a period when + * the `$viewValue` is out of sync with the ngModel's `$modelValue`. * - * In this case, you can run into difficulties if you try to update the ngModel's `$modelValue` + * In this case, you can use `$rollbackViewValue()` to manually cancel the debounced / future update + * and reset the input to the last committed view value. + * + * It is also possible that you run into difficulties if you try to update the ngModel's `$modelValue` * programmatically before these debounced/future events have resolved/occurred, because Angular's * dirty checking mechanism is not able to tell whether the model has actually changed or not. * @@ -465,39 +468,63 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ * angular.module('cancel-update-example', []) * * .controller('CancelUpdateController', ['$scope', function($scope) { - * $scope.resetWithCancel = function(e) { - * if (e.keyCode == 27) { - * $scope.myForm.myInput1.$rollbackViewValue(); - * $scope.myValue = ''; - * } - * }; - * $scope.resetWithoutCancel = function(e) { + * $scope.model = {}; + * + * $scope.setEmpty = function(e, value, rollback) { * if (e.keyCode == 27) { - * $scope.myValue = ''; + * e.preventDefault(); + * if (rollback) { + * $scope.myForm[value].$rollbackViewValue(); + * } + * $scope.model[value] = ''; * } * }; * }]); * * *
- *

Try typing something in each input. See that the model only updates when you - * blur off the input. - *

- *

Now see what happens if you start typing then press the Escape key

+ *

Both of these inputs are only updated if they are blurred. Hitting escape should + * empty them. Follow these steps and observe the difference:

+ *
    + *
  1. Type something in the input. You will see that the model is not yet updated
  2. + *
  3. Press the Escape key. + *
      + *
    1. In the first example, nothing happens, because the model is already '', and no + * update is detected. If you blur the input, the model will be set to the current view. + *
    2. + *
    3. In the second example, the pending update is cancelled, and the input is set back + * to the last committed view value (''). Blurring the input does nothing. + *
    4. + *
    + *
  4. + *
* *
- *

With $rollbackViewValue()

- *
- * myValue: "{{ myValue }}" + *
+ *

Without $rollbackViewValue():

+ * + * value1: "{{ model.value1 }}" + *
* - *

Without $rollbackViewValue()

- *
- * myValue: "{{ myValue }}" + *
+ *

With $rollbackViewValue():

+ * + * value2: "{{ model.value2 }}" + *
*
*
*
+ + div { + display: table-cell; + } + div:nth-child(1) { + padding-right: 30px; + } + + * */ this.$rollbackViewValue = function() {