@@ -847,11 +847,8 @@ var VALID_CLASS = 'ng-valid',
847
847
* purposefully does not contain any logic which deals with DOM rendering or listening to
848
848
* DOM events. Such DOM related logic should be provided by other directives which make use of
849
849
* `NgModelController` for data-binding.
850
- * Note that you cannot use `NgModelController` in a directive with an isolated scope,
851
- * as, in that case, the `ng-model` value gets put into the isolated scope and does not get
852
- * propagated to the parent scope.
853
- *
854
850
*
851
+ * ## Custom Control Example
855
852
* This example shows how to use `NgModelController` with a custom control to achieve
856
853
* data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
857
854
* collaborate together to achieve the desired result.
@@ -929,6 +926,39 @@ var VALID_CLASS = 'ng-valid',
929
926
</file>
930
927
* </example>
931
928
*
929
+ * ## Isolated Scope Pitfall
930
+ *
931
+ * Note that if you have a directive with an isolated scope, you cannot require `ngModel`
932
+ * since the model value will be looked up on the isolated scope rather than the outer scope.
933
+ * When the directive updates the model value, calling `ngModel.$setViewValue()` the property
934
+ * on the outer scope will not be updated.
935
+ *
936
+ * Here is an example of this situation. You'll notice that even though both 'input' and 'div'
937
+ * seem to be attached to the same model, they are not kept in synch.
938
+ *
939
+ * <example module="badIsolatedDirective">
940
+ <file name="script.js">
941
+ angular.module('badIsolatedDirective', []).directive('bad', function() {
942
+ return {
943
+ require: 'ngModel',
944
+ scope: { },
945
+ template: '<input ng-model="innerModel">',
946
+ link: function(scope, element, attrs, ngModel) {
947
+ scope.$watch('innerModel', function(value) {
948
+ console.log(value);
949
+ ngModel.$setViewValue(value);
950
+ });
951
+ }
952
+ };
953
+ });
954
+ </file>
955
+ <file name="index.html">
956
+ <input ng-model="someModel">
957
+ <div bad ng-model="someModel"></div>
958
+ </file>
959
+ * </example>
960
+ *
961
+ *
932
962
*/
933
963
var NgModelController = [ '$scope' , '$exceptionHandler' , '$attrs' , '$element' , '$parse' ,
934
964
function ( $scope , $exceptionHandler , $attr , $element , $parse ) {
0 commit comments