diff options
Diffstat (limited to 'src/widget')
| -rw-r--r-- | src/widget/form.js | 4 | ||||
| -rw-r--r-- | src/widget/input.js | 89 | ||||
| -rw-r--r-- | src/widget/select.js | 38 |
3 files changed, 60 insertions, 71 deletions
diff --git a/src/widget/form.js b/src/widget/form.js index 49e3a545..f3134db4 100644 --- a/src/widget/form.js +++ b/src/widget/form.js @@ -52,8 +52,8 @@ <doc:example> <doc:source> <script> - function Ctrl() { - this.text = 'guest'; + function Ctrl($scope) { + $scope.text = 'guest'; } </script> <div ng:controller="Ctrl"> diff --git a/src/widget/input.js b/src/widget/input.js index a744e567..5db52704 100644 --- a/src/widget/input.js +++ b/src/widget/input.js @@ -31,9 +31,9 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/; <doc:example> <doc:source> <script> - function Ctrl() { - this.text = 'guest'; - this.word = /^\w*$/; + function Ctrl($scope) { + $scope.text = 'guest'; + $scope.word = /^\w*$/; } </script> <div ng:controller="Ctrl"> @@ -96,8 +96,8 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/; <doc:example> <doc:source> <script> - function Ctrl() { - this.text = 'me@example.com'; + function Ctrl($scope) { + $scope.text = 'me@example.com'; } </script> <div ng:controller="Ctrl"> @@ -136,9 +136,8 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/; </doc:scenario> </doc:example> */ -angularInputType('email', function() { - var widget = this; - this.$on('$validate', function(event){ +angularInputType('email', function(element, widget) { + widget.$on('$validate', function(event) { var value = widget.$viewValue; widget.$emit(!value || value.match(EMAIL_REGEXP) ? "$valid" : "$invalid", "EMAIL"); }); @@ -170,8 +169,8 @@ angularInputType('email', function() { <doc:example> <doc:source> <script> - function Ctrl() { - this.text = 'http://google.com'; + function Ctrl($scope) { + $scope.text = 'http://google.com'; } </script> <div ng:controller="Ctrl"> @@ -210,9 +209,8 @@ angularInputType('email', function() { </doc:scenario> </doc:example> */ -angularInputType('url', function() { - var widget = this; - this.$on('$validate', function(event){ +angularInputType('url', function(element, widget) { + widget.$on('$validate', function(event) { var value = widget.$viewValue; widget.$emit(!value || value.match(URL_REGEXP) ? "$valid" : "$invalid", "URL"); }); @@ -239,8 +237,8 @@ angularInputType('url', function() { <doc:example> <doc:source> <script> - function Ctrl() { - this.names = ['igor', 'misko', 'vojta']; + function Ctrl($scope) { + $scope.names = ['igor', 'misko', 'vojta']; } </script> <div ng:controller="Ctrl"> @@ -270,7 +268,7 @@ angularInputType('url', function() { </doc:scenario> </doc:example> */ -angularInputType('list', function() { +angularInputType('list', function(element, widget) { function parse(viewValue) { var list = []; forEach(viewValue.split(/\s*,\s*/), function(value){ @@ -278,14 +276,14 @@ angularInputType('list', function() { }); return list; } - this.$parseView = function() { - isString(this.$viewValue) && (this.$modelValue = parse(this.$viewValue)); + widget.$parseView = function() { + isString(widget.$viewValue) && (widget.$modelValue = parse(widget.$viewValue)); }; - this.$parseModel = function() { - var modelValue = this.$modelValue; + widget.$parseModel = function() { + var modelValue = widget.$modelValue; if (isArray(modelValue) - && (!isString(this.$viewValue) || !equals(parse(this.$viewValue), modelValue))) { - this.$viewValue = modelValue.join(', '); + && (!isString(widget.$viewValue) || !equals(parse(widget.$viewValue), modelValue))) { + widget.$viewValue = modelValue.join(', '); } }; }); @@ -318,8 +316,8 @@ angularInputType('list', function() { <doc:example> <doc:source> <script> - function Ctrl() { - this.value = 12; + function Ctrl($scope) { + $scope.value = 12; } </script> <div ng:controller="Ctrl"> @@ -388,8 +386,8 @@ angularInputType('number', numericRegexpInputType(NUMBER_REGEXP, 'NUMBER')); <doc:example> <doc:source> <script> - function Ctrl() { - this.value = 12; + function Ctrl($scope) { + $scope.value = 12; } </script> <div ng:controller="Ctrl"> @@ -449,9 +447,9 @@ angularInputType('integer', numericRegexpInputType(INTEGER_REGEXP, 'INTEGER')); <doc:example> <doc:source> <script> - function Ctrl() { - this.value1 = true; - this.value2 = 'YES' + function Ctrl($scope) { + $scope.value1 = true; + $scope.value2 = 'YES' } </script> <div ng:controller="Ctrl"> @@ -477,9 +475,8 @@ angularInputType('integer', numericRegexpInputType(INTEGER_REGEXP, 'INTEGER')); </doc:scenario> </doc:example> */ -angularInputType('checkbox', function(inputElement) { - var widget = this, - trueValue = inputElement.attr('ng:true-value'), +angularInputType('checkbox', function(inputElement, widget) { + var trueValue = inputElement.attr('ng:true-value'), falseValue = inputElement.attr('ng:false-value'); if (!isString(trueValue)) trueValue = true; @@ -496,7 +493,7 @@ angularInputType('checkbox', function(inputElement) { }; widget.$parseModel = function() { - widget.$viewValue = this.$modelValue === trueValue; + widget.$viewValue = widget.$modelValue === trueValue; }; widget.$parseView = function() { @@ -522,8 +519,8 @@ angularInputType('checkbox', function(inputElement) { <doc:example> <doc:source> <script> - function Ctrl() { - this.color = 'blue'; + function Ctrl($scope) { + $scope.color = 'blue'; } </script> <div ng:controller="Ctrl"> @@ -545,9 +542,7 @@ angularInputType('checkbox', function(inputElement) { </doc:scenario> </doc:example> */ -angularInputType('radio', function(inputElement) { - var widget = this; - +angularInputType('radio', function(inputElement, widget) { //correct the name inputElement.attr('name', widget.$id + '@' + inputElement.attr('name')); inputElement.bind('click', function() { @@ -569,9 +564,8 @@ angularInputType('radio', function(inputElement) { function numericRegexpInputType(regexp, error) { - return ['$element', function(inputElement) { - var widget = this, - min = 1 * (inputElement.attr('min') || Number.MIN_VALUE), + return function(inputElement, widget) { + var min = 1 * (inputElement.attr('min') || Number.MIN_VALUE), max = 1 * (inputElement.attr('max') || Number.MAX_VALUE); widget.$on('$validate', function(event){ @@ -598,7 +592,7 @@ function numericRegexpInputType(regexp, error) { ? '' + widget.$modelValue : ''; }; - }]; + }; } @@ -640,8 +634,8 @@ var HTML5_INPUTS_TYPES = makeMap( <doc:example> <doc:source> <script> - function Ctrl() { - this.user = {name: 'guest', last: 'visitor'}; + function Ctrl($scope) { + $scope.user = {name: 'guest', last: 'visitor'}; } </script> <div ng:controller="Ctrl"> @@ -713,7 +707,8 @@ angularWidget('input', function(inputElement){ this.descend(true); var modelExp = inputElement.attr('ng:model'); return modelExp && - ['$defer', '$formFactory', '$element', function($defer, $formFactory, inputElement){ + ['$defer', '$formFactory', '$element', + function($defer, $formFactory, inputElement) { var form = $formFactory.forElement(inputElement), // We have to use .getAttribute, since jQuery tries to be smart and use the // type property. Trouble is some browser change unknown to text. @@ -762,7 +757,7 @@ angularWidget('input', function(inputElement){ } //TODO(misko): setting $inject is a hack - !TypeController.$inject && (TypeController.$inject = ['$element']); + !TypeController.$inject && (TypeController.$inject = ['$element', '$scope']); widget = form.$createWidget({ scope: modelScope, model: modelExp, @@ -866,7 +861,7 @@ angularWidget('textarea', angularWidget('input')); function watchElementProperty(modelScope, widget, name, element) { var bindAttr = fromJson(element.attr('ng:bind-attr') || '{}'), - match = /\s*{{(.*)}}\s*/.exec(bindAttr[name]), + match = /\s*\{\{(.*)\}\}\s*/.exec(bindAttr[name]), isBoolean = BOOLEAN_ATTR[name]; widget['$' + name] = isBoolean ? ( // some browsers return true some '' when required is set without value. diff --git a/src/widget/select.js b/src/widget/select.js index d4be91d9..b0f5eac5 100644 --- a/src/widget/select.js +++ b/src/widget/select.js @@ -65,15 +65,15 @@ <doc:example> <doc:source> <script> - function MyCntrl() { - this.colors = [ + function MyCntrl($scope) { + $scope.colors = [ {name:'black', shade:'dark'}, {name:'white', shade:'light'}, {name:'red', shade:'dark'}, {name:'blue', shade:'dark'}, {name:'yellow', shade:'light'} ]; - this.color = this.colors[2]; // red + $scope.color = $scope.colors[2]; // red } </script> <div ng:controller="MyCntrl"> @@ -140,11 +140,11 @@ angularWidget('select', function(element){ optionsExp = selectElement.attr('ng:options'), modelExp = selectElement.attr('ng:model'), widget = form.$createWidget({ - scope: this, + scope: modelScope, model: modelExp, onChange: selectElement.attr('ng:change'), alias: selectElement.attr('name'), - controller: optionsExp ? Options : (multiple ? Multiple : Single)}); + controller: ['$scope', optionsExp ? Options : (multiple ? Multiple : Single)]}); selectElement.bind('$destroy', function() { widget.$destroy(); }); @@ -174,11 +174,9 @@ angularWidget('select', function(element){ //////////////////////////// - function Multiple() { - var widget = this; - - this.$render = function() { - var items = new HashMap(this.$viewValue); + function Multiple(widget) { + widget.$render = function() { + var items = new HashMap(widget.$viewValue); forEach(selectElement.children(), function(option){ option.selected = isDefined(items.get(option.value)); }); @@ -198,9 +196,7 @@ angularWidget('select', function(element){ } - function Single() { - var widget = this; - + function Single(widget) { widget.$render = function() { selectElement.val(widget.$viewValue); }; @@ -214,9 +210,8 @@ angularWidget('select', function(element){ widget.$viewValue = selectElement.val(); } - function Options() { - var widget = this, - match; + function Options(widget) { + var match; if (! (match = optionsExp.match(NG_OPTIONS_REGEXP))) { throw Error( @@ -224,8 +219,7 @@ angularWidget('select', function(element){ " but got '" + optionsExp + "'."); } - var widgetScope = this, - displayFn = $parse(match[2] || match[1]), + var displayFn = $parse(match[2] || match[1]), valueName = match[4] || match[6], keyName = match[5], groupByFn = $parse(match[3] || ''), @@ -253,7 +247,7 @@ angularWidget('select', function(element){ selectElement.html(''); // clear contents selectElement.bind('change', function() { - widgetScope.$apply(function() { + widget.$apply(function() { var optionGroup, collection = valuesFn(modelScope) || [], key = selectElement.val(), @@ -288,13 +282,13 @@ angularWidget('select', function(element){ } } if (isDefined(value) && modelScope.$viewVal !== value) { - widgetScope.$emit('$viewChange', value); + widget.$emit('$viewChange', value); } }); }); - widgetScope.$watch(render); - widgetScope.$render = render; + widget.$watch(render); + widget.$render = render; function render() { var optionGroups = {'':[]}, // Temporary location for the option groups before we render them |
