diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/api/angular.inputType.ngdoc | 58 | ||||
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 2 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.forms.ngdoc | 82 | ||||
| -rw-r--r-- | docs/src/templates/index.html | 2 |
4 files changed, 34 insertions, 110 deletions
diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc index 9cbf9eb2..a5d1f74a 100644 --- a/docs/content/api/angular.inputType.ngdoc +++ b/docs/content/api/angular.inputType.ngdoc @@ -32,61 +32,3 @@ All `inputType` widgets support: - **`ng:pattern`** Sets `PATTERN` validation error key if the value does not match the RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for patterns defined as scope expressions. - - - -# Example - -<doc:example> -<doc:source> - <script> - angular.inputType('json', function(element, scope) { - scope.$parseView = function() { - try { - this.$modelValue = angular.fromJson(this.$viewValue); - if (this.$error.JSON) { - this.$emit('$valid', 'JSON'); - } - } catch (e) { - this.$emit('$invalid', 'JSON'); - } - } - - scope.$parseModel = function() { - this.$viewValue = angular.toJson(this.$modelValue); - } - }); - - function Ctrl($scope) { - $scope.data = { - framework:'angular', - codenames:'supper-powers' - } - $scope.required = false; - $scope.disabled = false; - $scope.readonly = false; - } - </script> - <div ng:controller="Ctrl"> - <form name="myForm"> - <input type="json" ng:model="data" size="80" - ng:required="{{required}}" ng:disabled="{{disabled}}" - ng:readonly="{{readonly}}"/><br/> - Required: <input type="checkbox" ng:model="required"> <br/> - Disabled: <input type="checkbox" ng:model="disabled"> <br/> - Readonly: <input type="checkbox" ng:model="readonly"> <br/> - <pre>data={{data}}</pre> - <pre>myForm={{myForm}}</pre> - </form> - </div> -</doc:source> -<doc:scenario> - it('should invalidate on wrong input', function() { - expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid'); - input('data').enter('{}'); - expect(binding('data')).toEqual('{}'); - input('data').enter('{'); - expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid'); - }); -</doc:scenario> -</doc:example> diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index 58a8dfd5..3e3b2d28 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -52,7 +52,7 @@ detection, and preventing invalid form submission. }; $scope.isSaveDisabled = function() { - return $scope.myForm.$invalid || angular.equals(master, $scope.form); + return $scope.myForm.invalid || angular.equals(master, $scope.form); }; $scope.cancel(); diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index 5a6fe54e..97d82bb1 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -138,7 +138,7 @@ The following example demonstrates: }; $scope.isSaveDisabled = function() { - return $scope.userForm.$invalid || angular.equals($scope.master, $scope.form); + return $scope.userForm.invalid || angular.equals($scope.master, $scope.form); }; $scope.cancel(); @@ -150,7 +150,7 @@ The following example demonstrates: <label>Name:</label><br/> <input type="text" name="customer" ng:model="form.customer" required/> - <span class="error" ng:show="userForm.customer.$error.REQUIRED"> + <span class="error" ng:show="userForm.customer.error.REQUIRED"> Customer name is required!</span> <br/><br/> @@ -165,15 +165,15 @@ The following example demonstrates: <input type="text" name="zip" ng:pattern="zip" size="5" required ng:model="form.address.zip"/><br/><br/> - <span class="error" ng:show="addressForm.$invalid"> + <span class="error" ng:show="addressForm.invalid"> Incomplete address: - <span class="error" ng:show="addressForm.state.$error.REQUIRED"> + <span class="error" ng:show="addressForm.state.error.REQUIRED"> Missing state!</span> - <span class="error" ng:show="addressForm.state.$error.PATTERN"> + <span class="error" ng:show="addressForm.state.error.PATTERN"> Invalid state!</span> - <span class="error" ng:show="addressForm.zip.$error.REQUIRED"> + <span class="error" ng:show="addressForm.zip.error.REQUIRED"> Missing zip!</span> - <span class="error" ng:show="addressForm.zip.$error.PATTERN"> + <span class="error" ng:show="addressForm.zip.error.PATTERN"> Invalid zip!</span> </span> </ng:form> @@ -284,56 +284,38 @@ This example shows how to implement a custom HTML editor widget in Angular. $scope.htmlContent = '<b>Hello</b> <i>World</i>!'; } - HTMLEditorWidget.$inject = ['$scope', '$element', '$sanitize']; - function HTMLEditorWidget(scope, element, $sanitize) { - scope.$parseModel = function() { - // need to protect for script injection - try { - scope.$viewValue = $sanitize( - scope.$modelValue || ''); - if (this.$error.HTML) { - // we were invalid, but now we are OK. - scope.$emit('$valid', 'HTML'); - } - } catch (e) { - // if HTML not parsable invalidate form. - scope.$emit('$invalid', 'HTML'); - } - } + angular.module('formModule', []).directive('ngHtmlEditor', function ($sanitize) { + return { + require: 'ngModel', + link: function(scope, elm, attr, ctrl) { + attr.$set('contentEditable', true); - scope.$render = function() { - element.html(this.$viewValue); - } + ctrl.$render = function() { + elm.html(ctrl.viewValue); + }; - element.bind('keyup', function() { - scope.$apply(function() { - scope.$emit('$viewChange', element.html()); - }); - }); - } + ctrl.formatters.push(function(value) { + try { + value = $sanitize(value || ''); + ctrl.emitValidity('HTML', true); + } catch (e) { + ctrl.emitValidity('HTML', false); + } + + }); - angular.module('formModule', [], function($compileProvider){ - $compileProvider.directive('ngHtmlEditorModel', function ($formFactory) { - return function(scope, element, attr) { - var form = $formFactory.forElement(element), - widget; - element.attr('contentEditable', true); - widget = form.$createWidget({ - scope: scope, - model: attr.ngHtmlEditorModel, - controller: HTMLEditorWidget, - controllerArgs: {$element: element}}); - // if the element is destroyed, then we need to - // notify the form. - element.bind('$destroy', function() { - widget.$destroy(); + elm.bind('keyup', function() { + scope.$apply(function() { + ctrl.read(elm.html()); + }); }); - }; - }); + + } + }; }); </script> <form name='editorForm' ng:controller="EditorCntl"> - <div ng:html-editor-model="htmlContent"></div> + <div ng:html-editor ng:model="htmlContent"></div> <hr/> HTML: <br/> <textarea ng:model="htmlContent" cols="80"></textarea> diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html index 93d8cdda..46a77da3 100644 --- a/docs/src/templates/index.html +++ b/docs/src/templates/index.html @@ -101,7 +101,7 @@ <div id="sidebar"> <input type="text" ng:model="search" id="search-box" placeholder="search the docs" - tabindex="1" accesskey="s"> + tabindex="1" accesskey="s" ng:bind-immediate> <ul id="content-list" ng:class="sectionId" ng:cloak> <li ng:repeat="page in pages | filter:search" ng:class="getClass(page)"> |