Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-09 15:24:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(ngModelController): clarify issue with isolated scope directive

Browse source 
See #4043
This commit is contained in:
Pete Bacon Darwin 2013-09-19 21:08:37 +01:00
parent 72ad746b85
commit f12c61e984
1 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/ng/directive/input.js
View file

@ -847,11 +847,8 @@ var VALID_CLASS = 'ng-valid',
* purposefully does not contain any logic which deals with DOM rendering or listening to * purposefully does not contain any logic which deals with DOM rendering or listening to
* DOM events. Such DOM related logic should be provided by other directives which make use of * DOM events. Such DOM related logic should be provided by other directives which make use of
* `NgModelController` for data-binding. * `NgModelController` for data-binding.
* Note that you cannot use `NgModelController` in a directive with an isolated scope,
* as, in that case, the `ng-model` value gets put into the isolated scope and does not get
* propagated to the parent scope.
*
* *
* ## Custom Control Example
* This example shows how to use `NgModelController` with a custom control to achieve * This example shows how to use `NgModelController` with a custom control to achieve
* data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`) * data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
* collaborate together to achieve the desired result. * collaborate together to achieve the desired result.
@ -929,6 +926,39 @@ var VALID_CLASS = 'ng-valid',
</file> </file>
* </example> * </example>
* *
* ## Isolated Scope Pitfall
*
* Note that if you have a directive with an isolated scope, you cannot require `ngModel`
* since the model value will be looked up on the isolated scope rather than the outer scope.
* When the directive updates the model value, calling `ngModel.$setViewValue()` the property
* on the outer scope will not be updated.
*
* Here is an example of this situation. You'll notice that even though both 'input' and 'div'
* seem to be attached to the same model, they are not kept in synch.
*
* <example module="badIsolatedDirective">
<file name="script.js">
angular.module('badIsolatedDirective', []).directive('bad', function() {
return {
require: 'ngModel',
scope: { },
template: '<input ng-model="innerModel">',
link: function(scope, element, attrs, ngModel) {
scope.$watch('innerModel', function(value) {
console.log(value);
ngModel.$setViewValue(value);
});
}
};
});
</file>
<file name="index.html">
<input ng-model="someModel">
<div bad ng-model="someModel"></div>
</file>
* </example>
*
*
*/ */
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse',
function($scope, $exceptionHandler, $attr, $element, $parse) { function($scope, $exceptionHandler, $attr, $element, $parse) {