Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-18 11:31:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(input): Fix some broken links, add missing $, use ng- in examples

Browse source
This commit is contained in:
Vojta Jina 2012-03-13 13:52:57 -07:00
parent a29c2cf70c
commit 63be222326
8 changed files with 70 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
docs/content/api/angular.module.ng.$compileProvider.directive.ngdoc
View file

@ -115,7 +115,7 @@ To understand this, lets look at a real world example with repeater:
<pre> <pre>
Hello {{user}}, you have these actions: Hello {{user}}, you have these actions:
<ul> <ul>
<li ng:repeat="action in user.actions"> <li ng-repeat="action in user.actions">
{{action.description}} {{action.description}}
</li> </li>
</ul> </ul>
@ -126,8 +126,8 @@ a change in DOM structure such as in repeaters.
When the above example is compiled, the compiler visits every node and looks for directives. The When the above example is compiled, the compiler visits every node and looks for directives. The
`{{user}}` is an example of {@link angular.module.ng.$interpolate interpolation} directive. {@link `{{user}}` is an example of {@link angular.module.ng.$interpolate interpolation} directive. {@link
angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} is another directive. But {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} is another directive. But {@link
angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} has a dilemma. It needs to be angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} has a dilemma. It needs to be
able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs
to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted, to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted,
the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element
@ -143,12 +143,12 @@ the directives are identified and sorted by priority, and a linking phase where
links a specific instance of the {@link angular.module.ng.$rootScope.Scope scope} and the specific links a specific instance of the {@link angular.module.ng.$rootScope.Scope scope} and the specific
instance of an `li` is performed. instance of an `li` is performed.
{@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} works by preventing the {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} works by preventing the
compilation process form descending into `li` element. Instead the {@link compilation process form descending into `li` element. Instead the {@link
angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} directive compiles `li` angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} directive compiles `li`
seperatly. The result of of the `li` element compilation is a linking function which contains all seperatly. The result of of the `li` element compilation is a linking function which contains all
of the directives contained in the `li` element ready to be attached to a specific clone of `li` of the directives contained in the `li` element ready to be attached to a specific clone of `li`
element. At runtime the {@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} element. At runtime the {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat}
watches the expression and as items are added to the array it clones the `li` element, creates a watches the expression and as items are added to the array it clones the `li` element, creates a
new {@link angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the new {@link angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the
link function on the cloned `li`. link function on the cloned `li`.
@ -415,8 +415,8 @@ compiler}. The attributes are:
append the template to the element. append the template to the element.
* `transclude` - compile the content of the element and make it available to the directive. * `transclude` - compile the content of the element and make it available to the directive.
Typically used with {@link api/angular.module.ng.$compileProvider.directive.ng:transclude Typically used with {@link api/angular.module.ng.$compileProvider.directive.ng-transclude
ng:transclude}. The advantage of transclusion is that the linking function receives a ng-transclude}. The advantage of transclusion is that the linking function receives a
transclusion function which is pre-bound to the correct scope. In a typical setup the widget transclusion function which is pre-bound to the correct scope. In a typical setup the widget
creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate` creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate`
scope. This makes it possible for the widget to have private state, and the transclusion to scope. This makes it possible for the widget to have private state, and the transclusion to
@ -440,8 +440,8 @@ compiler}. The attributes are:
Compile function deals with transforming the template DOM. Since most directives do not do Compile function deals with transforming the template DOM. Since most directives do not do
template transformation, it is not used often. Examples which require compile functions are template transformation, it is not used often. Examples which require compile functions are
directives which transform template DOM such as {@link directives which transform template DOM such as {@link
angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat} or load the contents angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat} or load the contents
asynchronously such as {@link angular.module.ng.$compileProvider.directive.ng:view ng:view}. The asynchronously such as {@link angular.module.ng.$compileProvider.directive.ng-view ng-view}. The
compile functions takes the following arguments. compile functions takes the following arguments.
* `tElement` - template element - The element where the directive has been declared. It is * `tElement` - template element - The element where the directive has been declared. It is

30
docs/content/cookbook/advancedform.ngdoc
View file

@ -58,35 +58,35 @@ detection, and preventing invalid form submission.
$scope.cancel(); $scope.cancel();
} }
</script> </script>
<div ng:controller="UserForm"> <div ng-controller="UserForm">
<form name="myForm"> <form name="myForm">
<label>Name:</label><br/> <label>Name:</label><br/>
<input type="text" ng:model="form.name" required/> <br/><br/> <input type="text" ng-model="form.name" required/> <br/><br/>
<label>Address:</label> <br/> <label>Address:</label> <br/>
<input type="text" ng:model="form.address.line1" size="33" required/> <br/> <input type="text" ng-model="form.address.line1" size="33" required/> <br/>
<input type="text" ng:model="form.address.city" size="12" required/>, <input type="text" ng-model="form.address.city" size="12" required/>,
<input type="text" ng:model="form.address.state" size="2" <input type="text" ng-model="form.address.state" size="2"
ng:pattern="state" required/> ng-pattern="state" required/>
<input type="text" ng:model="form.address.zip" size="5" <input type="text" ng-model="form.address.zip" size="5"
ng:pattern="zip" required/><br/><br/> ng-pattern="zip" required/><br/><br/>
<label>Contacts:</label> <label>Contacts:</label>
[ <a href="" ng:click="addContact()">add</a> ] [ <a href="" ng-click="addContact()">add</a> ]
<div ng:repeat="contact in form.contacts"> <div ng-repeat="contact in form.contacts">
<select ng:model="contact.type"> <select ng-model="contact.type">
<option>email</option> <option>email</option>
<option>phone</option> <option>phone</option>
<option>pager</option> <option>pager</option>
<option>IM</option> <option>IM</option>
</select> </select>
<input type="text" ng:model="contact.value" required/> <input type="text" ng-model="contact.value" required/>
[ <a href="" ng:click="removeContact(contact)">X</a> ] [ <a href="" ng-click="removeContact(contact)">X</a> ]
</div> </div>
<button ng:click="cancel()" ng:disabled="{{isCancelDisabled()}}">Cancel</button> <button ng-click="cancel()" ng-disabled="{{isCancelDisabled()}}">Cancel</button>
<button ng:click="save()" ng:disabled="{{isSaveDisabled()}}">Save</button> <button ng-click="save()" ng-disabled="{{isSaveDisabled()}}">Save</button>
</form> </form>
<hr/> <hr/>

20
docs/content/cookbook/buzz.ngdoc
View file

@ -31,22 +31,22 @@ to retrieve Buzz activity and comments.
} }
}; };
</script> </script>
<div ng:controller="BuzzController"> <div ng-controller="BuzzController">
<input ng:model="userId"/> <input ng-model="userId"/>
<button ng:click="fetch()">fetch</button> <button ng-click="fetch()">fetch</button>
<hr/> <hr/>
<div class="buzz" ng:repeat="item in activities.data.items"> <div class="buzz" ng-repeat="item in activities.data.items">
<h1 style="font-size: 15px;"> <h1 style="font-size: 15px;">
<img ng:src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> <img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a ng:href="{{item.actor.profileUrl}}">{{item.actor.name}}</a> <a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
<a href ng:click="expandReplies(item)" style="float: right;"> <a href ng-click="expandReplies(item)" style="float: right;">
Expand replies: {{item.links.replies[0].count}} Expand replies: {{item.links.replies[0].count}}
</a> </a>
</h1> </h1>
{{item.object.content | html}} {{item.object.content | html}}
<div class="reply" ng:repeat="reply in item.replies.data.items" style="margin-left: 20px;"> <div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
<img ng:src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> <img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a ng:href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: <a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
{{reply.content | html}} {{reply.content | html}}
</div> </div>
</div> </div>

8
docs/content/cookbook/deeplinking.ngdoc
View file

@ -33,8 +33,8 @@ In this example we have a simple app which consist of two screens:
The two partials are defined in the following URLs: The two partials are defined in the following URLs:
* <a href="./examples/settings.html" ng:ext-link>./examples/settings.html</a> * <a href="./examples/settings.html" ng-ext-link>./examples/settings.html</a>
* <a href="./examples/welcome.html" ng:ext-link>./examples/welcome.html</a> * <a href="./examples/welcome.html" ng-ext-link>./examples/welcome.html</a>
<doc:example module="deepLinking"> <doc:example module="deepLinking">
<doc:source jsfiddle="false"> <doc:source jsfiddle="false">
@ -73,7 +73,7 @@ The two partials are defined in the following URLs:
$scope.cancel(); $scope.cancel();
} }
</script> </script>
<div ng:controller="AppCntl"> <div ng-controller="AppCntl">
<h1>Your App Chrome</h1> <h1>Your App Chrome</h1>
[ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ] [ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
<hr/> <hr/>
@ -106,7 +106,7 @@ The two partials are defined in the following URLs:
routes. routes.
* The {@link api/angular.module.ng.$route $route} service then watches the URL and instantiates the * The {@link api/angular.module.ng.$route $route} service then watches the URL and instantiates the
appropriate controller when the URL changes. appropriate controller when the URL changes.
* The {@link api/angular.module.ng.$compileProvider.directive.ng:view ng:view} widget loads the * The {@link api/angular.module.ng.$compileProvider.directive.ng-view ng-view} widget loads the
view when the URL changes. It also sets the view scope to the newly instantiated controller. view when the URL changes. It also sets the view scope to the newly instantiated controller.
* Changing the URL is sufficient to change the controller and view. It makes no difference whether * Changing the URL is sufficient to change the controller and view. It makes no difference whether
the URL is changed programatically or by the user. the URL is changed programatically or by the user.

28
docs/content/cookbook/form.ngdoc
View file

@ -32,30 +32,30 @@ allow a user to enter data.
}; };
} }
</script> </script>
<div ng:controller="FormController" class="example"> <div ng-controller="FormController" class="example">
<label>Name:</label><br/> <label>Name:</label><br/>
<input type="text" ng:model="user.name" required/> <br/><br/> <input type="text" ng-model="user.name" required/> <br/><br/>
<label>Address:</label><br/> <label>Address:</label><br/>
<input type="text" ng:model="user.address.line1" size="33" required> <br/> <input type="text" ng-model="user.address.line1" size="33" required> <br/>
<input type="text" ng:model="user.address.city" size="12" required>, <input type="text" ng-model="user.address.city" size="12" required>,
<input type="text" ng:model="user.address.state" size="2" <input type="text" ng-model="user.address.state" size="2"
ng:pattern="state" required> ng-pattern="state" required>
<input type="text" ng:model="user.address.zip" size="5" <input type="text" ng-model="user.address.zip" size="5"
ng:pattern="zip" required><br/><br/> ng-pattern="zip" required><br/><br/>
<label>Phone:</label> <label>Phone:</label>
[ <a href="" ng:click="addContact()">add</a> ] [ <a href="" ng-click="addContact()">add</a> ]
<div ng:repeat="contact in user.contacts"> <div ng-repeat="contact in user.contacts">
<select ng:model="contact.type"> <select ng-model="contact.type">
<option>email</option> <option>email</option>
<option>phone</option> <option>phone</option>
<option>pager</option> <option>pager</option>
<option>IM</option> <option>IM</option>
</select> </select>
<input type="text" ng:model="contact.value" required/> <input type="text" ng-model="contact.value" required/>
[ <a href="" ng:click="removeContact(contact)">X</a> ] [ <a href="" ng-click="removeContact(contact)">X</a> ]
</div> </div>
<hr/> <hr/>
Debug View: Debug View:
@ -102,7 +102,7 @@ allow a user to enter data.
# Things to notice # Things to notice
* The user data model is initialized {@link api/angular.module.ng.$compileProvider.directive.ng:controller controller} and is * The user data model is initialized {@link api/angular.module.ng.$compileProvider.directive.ng-controller controller} and is
available in the {@link api/angular.module.ng.$rootScope.Scope scope} with the initial data. available in the {@link api/angular.module.ng.$rootScope.Scope scope} with the initial data.
* For debugging purposes we have included a debug view of the model to better understand what * For debugging purposes we have included a debug view of the model to better understand what
is going on. is going on.

4
docs/content/cookbook/helloworld.ngdoc
View file

@ -9,8 +9,8 @@
$scope.name = 'World'; $scope.name = 'World';
} }
</script> </script>
<div ng:controller="HelloCntl"> <div ng-controller="HelloCntl">
Your name: <input type="text" ng:model="name" value="World"/> Your name: <input type="text" ng-model="name" value="World"/>
<hr/> <hr/>
Hello {{name}}! Hello {{name}}!
</div> </div>

12
docs/content/cookbook/mvc.ngdoc
View file

@ -80,16 +80,16 @@ no connection between the controller and the view.
</script> </script>
<h3>Tic-Tac-Toe</h3> <h3>Tic-Tac-Toe</h3>
<div ng:controller="TicTacToeCntl"> <div ng-controller="TicTacToeCntl">
Next Player: {{nextMove}} Next Player: {{nextMove}}
<div class="winner" ng:show="winner">Player {{winner}} has won!</div> <div class="winner" ng-show="winner">Player {{winner}} has won!</div>
<table class="board"> <table class="board">
<tr ng:repeat="row in board" style="height:15px;"> <tr ng-repeat="row in board" style="height:15px;">
<td ng:repeat="cell in row" ng:style="cellStyle" <td ng-repeat="cell in row" ng-style="cellStyle"
ng:click="dropPiece($parent.$index, $index)">{{cell}}</td> ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
</tr> </tr>
</table> </table>
<button ng:click="reset()">reset board</button> <button ng-click="reset()">reset board</button>
</div> </div>
</doc:source> </doc:source>
<doc:scenario> <doc:scenario>

18
src/directive/input.js
View file

@ -724,20 +724,20 @@ var inputDirective = [function() {
* @ngdoc object * @ngdoc object
* @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController
* *
* @property {string} viewValue Actual string value in the view. * @property {string} $viewValue Actual string value in the view.
* @property {*} modelValue The value in the model, that the control is bound to. * @property {*} $modelValue The value in the model, that the control is bound to.
* @property {Array.<Function>} parsers Whenever the control reads value from the DOM, it executes * @property {Array.<Function>} $parsers Whenever the control reads value from the DOM, it executes
* all of these functions to sanitize / convert the value as well as validate. * all of these functions to sanitize / convert the value as well as validate.
* *
* @property {Array.<Function>} formatters Whenever the model value changes, it executes all of * @property {Array.<Function>} $formatters Whenever the model value changes, it executes all of
* these functions to convert the value as well as validate. * these functions to convert the value as well as validate.
* *
* @property {Object} error An bject hash with all errors as keys. * @property {Object} $error An bject hash with all errors as keys.
* *
* @property {boolean} pristine True if user has not interacted with the control yet. * @property {boolean} $pristine True if user has not interacted with the control yet.
* @property {boolean} dirty True if user has already interacted with the control. * @property {boolean} $dirty True if user has already interacted with the control.
* @property {boolean} valid True if there is no error. * @property {boolean} $valid True if there is no error.
* @property {boolean} invalid True if at least one error on the control. * @property {boolean} $invalid True if at least one error on the control.
* *
* @description * @description
* *