Skip to content

Commit be2c03d

Browse files
petebacondarwinjamesdaily
authored andcommitted
docs(ngModelController): clarify issue with isolated scope directive
See angular#4043
1 parent 7663424 commit be2c03d

File tree

1 file changed

+34
-4
lines changed

1 file changed

+34
-4
lines changed

src/ng/directive/input.js

+34-4
Original file line numberDiff line numberDiff line change
@@ -847,11 +847,8 @@ var VALID_CLASS = 'ng-valid',
847847
* purposefully does not contain any logic which deals with DOM rendering or listening to
848848
* DOM events. Such DOM related logic should be provided by other directives which make use of
849849
* `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-
*
854850
*
851+
* ## Custom Control Example
855852
* This example shows how to use `NgModelController` with a custom control to achieve
856853
* data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
857854
* collaborate together to achieve the desired result.
@@ -929,6 +926,39 @@ var VALID_CLASS = 'ng-valid',
929926
</file>
930927
* </example>
931928
*
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+
*
932962
*/
933963
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse',
934964
function($scope, $exceptionHandler, $attr, $element, $parse) {

0 commit comments

Comments
 (0)