diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 29 | ||||
| -rw-r--r-- | docs/content/cookbook/form.ngdoc | 16 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.expressions.ngdoc | 17 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.forms.ngdoc | 26 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.services.injecting_controllers.ngdoc | 24 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc | 32 | ||||
| -rw-r--r-- | docs/src/templates/docs.css | 8 |
7 files changed, 108 insertions, 44 deletions
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index 19b8284f..e973e30f 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -34,7 +34,28 @@ detection, and preventing invalid form submission. save: function() { this.master = this.form; this.cancel(); + }, + + addContact: function() { + this.form.contacts.push({type:'', value:''}); + }, + + removeContact: function(contact) { + for ( var i = 0, ii = this.form.contacts.length; i < ii; i++) { + if (contact === this.form.contacts[i]) { + this.form.contacts.splice(i, 1); + } + } + }, + + isCancelDisabled: function() { + return angular.equals(this.master, this.form); + }, + + isSaveDisabled: function() { + return this.myForm.$invalid || angular.equals(this.master, this.form); } + }; </script> <div ng:controller="UserForm"> @@ -53,7 +74,7 @@ detection, and preventing invalid form submission. ng:pattern="zip" required/><br/><br/> <label>Contacts:</label> - [ <a href="" ng:click="form.contacts.$add()">add</a> ] + [ <a href="" ng:click="addContact()">add</a> ] <div ng:repeat="contact in form.contacts"> <select ng:model="contact.type"> <option>email</option> @@ -62,10 +83,10 @@ detection, and preventing invalid form submission. <option>IM</option> </select> <input type="text" ng:model="contact.value" required/> - [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ] + [ <a href="" ng:click="removeContact(contact)">X</a> ] </div> - <button ng:click="cancel()" ng:disabled="{{master.$equals(form)}}">Cancel</button> - <button ng:click="save()" ng:disabled="{{myForm.$invalid || master.$equals(form)}}">Save</button> + <button ng:click="cancel()" ng:disabled="{{isCancelDisabled()}}">Cancel</button> + <button ng:click="save()" ng:disabled="{{isSaveDisabled()}}">Save</button> </form> <hr/> diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc index 6cd1d83a..1b5bf32b 100644 --- a/docs/content/cookbook/form.ngdoc +++ b/docs/content/cookbook/form.ngdoc @@ -18,6 +18,18 @@ allow a user to enter data. }; this.state = /^\w\w$/; this.zip = /^\d\d\d\d\d$/; + + this.addContact = function() { + this.user.contacts.push({type:'', value:''}); + }; + + this.removeContact = function(contact) { + for ( var i = 0, ii = this.user.contacts.length; i < ii; i++) { + if (contact === this.user.contacts[i]) { + this.user.contacts.splice(i, 1); + } + } + }; } </script> <div ng:controller="FormController" class="example"> @@ -34,7 +46,7 @@ allow a user to enter data. ng:pattern="zip" required><br/><br/> <label>Phone:</label> - [ <a href="" ng:click="user.contacts.$add()">add</a> ] + [ <a href="" ng:click="addContact()">add</a> ] <div ng:repeat="contact in user.contacts"> <select ng:model="contact.type"> <option>email</option> @@ -43,7 +55,7 @@ allow a user to enter data. <option>IM</option> </select> <input type="text" ng:model="contact.value" required/> - [ <a href="" ng:click="user.contacts.$remove(contact)">X</a> ] + [ <a href="" ng:click="removeContact(contact)">X</a> ] </div> <hr/> Debug View: diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc index 420a6f98..b9417b38 100644 --- a/docs/content/guide/dev_guide.expressions.ngdoc +++ b/docs/content/guide/dev_guide.expressions.ngdoc @@ -54,15 +54,26 @@ You can try evaluating different expressions here: function Cntl2() { this.exprs = []; this.expr = '3*10|currency'; + this.addExp = function(expr) { + this.exprs.push(expr); + }; + + this.removeExp = function(contact) { + for ( var i = 0, ii = this.exprs.length; i < ii; i++) { + if (contact === this.exprs[i]) { + this.exprs.splice(i, 1); + } + } + }; } </script> <div ng:controller="Cntl2" class="expressions"> Expression: <input type='text' ng:model="expr" size="80"/> - <button ng:click="exprs.$add(expr)">Evaluate</button> + <button ng:click="addExp(expr)">Evaluate</button> <ul> <li ng:repeat="expr in exprs"> - [ <a href="" ng:click="exprs.$remove(expr)">X</a> ] + [ <a href="" ng:click="removeExp(expr)">X</a> ] <tt>{{expr}}</tt> => <span ng:bind="$parent.$eval(expr)"></span> </li> </ul> @@ -175,7 +186,7 @@ Extensions: You can further extend the expression vocabulary by adding new metho Search: <input ng:model="searchText"/> <table class="example3"> <tr><th>Name</th><th>Phone</th><tr> - <tr ng:repeat="friend in friends.$filter(searchText)"> + <tr ng:repeat="friend in friends | filter:searchText"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> </tr> diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index 980b6c17..aaad66a5 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -134,7 +134,16 @@ The following example demonstrates: save: function() { this.master = this.form; this.cancel(); + }, + + isCancelDisabled: function() { + return angular.equals(this.master, this.form); + }, + + isSaveDisabled: function() { + return this.userForm.$invalid || angular.equals(this.master, this.form); } + }; </script> <div ng:controller="UserFormCntl"> @@ -172,10 +181,9 @@ The following example demonstrates: </ng:form> <button ng:click="cancel()" - ng:disabled="{{master.$equals(form)}}">Cancel</button> + ng:disabled="{{isCancelDisabled()}}">Cancel</button> <button ng:click="save()" - ng:disabled="{{userForm.$invalid || master.$equals(form)}}"> - Save</button> + ng:disabled="{{isSaveDisabled()}}">Save</button> </form> <hr/> @@ -278,9 +286,9 @@ This example shows how to implement a custom HTML editor widget in Angular. this.htmlContent = '<b>Hello</b> <i>World</i>!'; } - function HTMLEditorWidget(element) { + HTMLEditorWidget.$inject = ['$element', 'html$Filter']; + function HTMLEditorWidget(element, htmlFilter) { var self = this; - var htmlFilter = angular.filter('html'); this.$parseModel = function() { // need to protect for script injection @@ -309,7 +317,7 @@ This example shows how to implement a custom HTML editor widget in Angular. } angular.directive('ng:html-editor-model', function() { - function linkFn($formFactory, element) { + return ['$formFactory', '$element', function ($formFactory, element) { var exp = element.attr('ng:html-editor-model'), form = $formFactory.forElement(element), widget; @@ -318,15 +326,13 @@ This example shows how to implement a custom HTML editor widget in Angular. scope: this, model: exp, controller: HTMLEditorWidget, - controllerArgs: [element]}); + controllerArgs: {$element: element}}); // if the element is destroyed, then we need to // notify the form. element.bind('$destroy', function() { widget.$destroy(); }); - } - linkFn.$inject = ['$formFactory']; - return linkFn; + }]; }); </script> <form name='editorForm' ng:controller="EditorCntl"> diff --git a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc index d58f2c3c..56823eb9 100644 --- a/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc +++ b/docs/content/guide/dev_guide.services.injecting_controllers.ngdoc @@ -31,16 +31,18 @@ myController.$inject = ['$location', '$log']; <doc:example> <doc:source> <script type="text/javascript"> -angular.service('notify', function(win) { - var msgs = []; - return function(msg) { - msgs.push(msg); - if (msgs.length == 3) { - win.alert(msgs.join("\n")); - msgs = []; - } - }; -}, {$inject: ['$window']}); +angular.module.MyServiceModule = ['$provide', function($provide){ + $provide.factory('notify', ['$window', function(win) { + var msgs = []; + return function(msg) { + msgs.push(msg); + if (msgs.length == 3) { + win.alert(msgs.join("\n")); + msgs = []; + } + }; + }]); +}]; function myController(notifyService) { this.callNotify = function(msg) { @@ -51,7 +53,7 @@ function myController(notifyService) { myController.$inject = ['notify']; </script> -<div ng:controller="myController"> +<div ng:controller="myController" ng:module="MyServiceModule"> <p>Let's try this simple notify service, injected into the controller...</p> <input ng:init="message='test'" type="text" ng:model="message" /> <button ng:click="callNotify(message);">NOTIFY</button> diff --git a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc index e57c5509..9404ad65 100644 --- a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc @@ -19,28 +19,32 @@ text upper-case and assigns color. <doc:example> <doc:source> <script type="text/javascript"> - angular.filter('reverse', function(input, uppercase, color) { - var out = ""; - for (var i = 0; i < input.length; i++) { - out = input.charAt(i) + out; +angular.module.MyReverseModule = function MyModule($provide) { + $provide.filter('reverse', function() { + return function(input, uppercase, color) { + var out = ""; + for (var i = 0; i < input.length; i++) { + out = input.charAt(i) + out; + } + // conditional based on optional argument + if (uppercase) { + out = out.toUpperCase(); + } + // DOM manipulation using $element + if (color) { + this.$element.css('color', color); + } + return out; } - // conditional based on optional argument - if (uppercase) { - out = out.toUpperCase(); - } - // DOM manipulation using $element - if (color) { - this.$element.css('color', color); - } - return out; }); +} function Ctrl() { this.greeting = 'hello'; } </script> -<div ng:controller="Ctrl"> +<div ng:controller="Ctrl" ng:module="MyReverseModule"> <input ng:model="greeting" type="greeting"><br> No filter: {{greeting}}<br> Reverse: {{greeting|reverse}}<br> diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css index d42ec093..5c7a064a 100644 --- a/docs/src/templates/docs.css +++ b/docs/src/templates/docs.css @@ -474,3 +474,11 @@ td.empty-corner-lt { .error { color: red; } + +.odd { + background-color: #808080; +} + +.even { + background-color: #d3d3d3; +} |