mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
docs(input): Fix some broken links, add missing $, use ng- in examples
This commit is contained in:
Vojta Jina
parent
a29c2cf70c
commit
63be222326
8 changed files with 70 additions and 70 deletions
|
|
@ -115,7 +115,7 @@ To understand this, lets look at a real world example with repeater:
|
|||
<pre>
|
||||
Hello {{user}}, you have these actions:
|
||||
<ul>
|
||||
<li ng:repeat="action in user.actions">
|
||||
<li ng-repeat="action in user.actions">
|
||||
{{action.description}}
|
||||
</li>
|
||||
</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
|
||||
`{{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} has a dilemma. It needs to be
|
||||
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
|
||||
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,
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
new {@link angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the
|
||||
link function on the cloned `li`.
|
||||
|
|
@ -415,8 +415,8 @@ compiler}. The attributes are:
|
|||
append the template to the element.
|
||||
|
||||
* `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
|
||||
ng:transclude}. The advantage of transclusion is that the linking function receives a
|
||||
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
|
||||
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`
|
||||
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
|
||||
template transformation, it is not used often. Examples which require compile functions are
|
||||
directives which transform template DOM such as {@link
|
||||
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
|
||||
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
|
||||
compile functions takes the following arguments.
|
||||
|
||||
* `tElement` - template element - The element where the directive has been declared. It is
|
||||
|
|
|
|||
|
|
@ -58,35 +58,35 @@ detection, and preventing invalid form submission.
|
|||
$scope.cancel();
|
||||
}
|
||||
</script>
|
||||
<div ng:controller="UserForm">
|
||||
<div ng-controller="UserForm">
|
||||
|
||||
<form name="myForm">
|
||||
|
||||
<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/>
|
||||
<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.state" size="2"
|
||||
ng:pattern="state" required/>
|
||||
<input type="text" ng:model="form.address.zip" size="5"
|
||||
ng:pattern="zip" required/><br/><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.state" size="2"
|
||||
ng-pattern="state" required/>
|
||||
<input type="text" ng-model="form.address.zip" size="5"
|
||||
ng-pattern="zip" required/><br/><br/>
|
||||
|
||||
<label>Contacts:</label>
|
||||
[ <a href="" ng:click="addContact()">add</a> ]
|
||||
<div ng:repeat="contact in form.contacts">
|
||||
<select ng:model="contact.type">
|
||||
[ <a href="" ng-click="addContact()">add</a> ]
|
||||
<div ng-repeat="contact in form.contacts">
|
||||
<select ng-model="contact.type">
|
||||
<option>email</option>
|
||||
<option>phone</option>
|
||||
<option>pager</option>
|
||||
<option>IM</option>
|
||||
</select>
|
||||
<input type="text" ng:model="contact.value" required/>
|
||||
[ <a href="" ng:click="removeContact(contact)">X</a> ]
|
||||
<input type="text" ng-model="contact.value" required/>
|
||||
[ <a href="" ng-click="removeContact(contact)">X</a> ]
|
||||
</div>
|
||||
<button ng:click="cancel()" ng:disabled="{{isCancelDisabled()}}">Cancel</button>
|
||||
<button ng:click="save()" ng:disabled="{{isSaveDisabled()}}">Save</button>
|
||||
<button ng-click="cancel()" ng-disabled="{{isCancelDisabled()}}">Cancel</button>
|
||||
<button ng-click="save()" ng-disabled="{{isSaveDisabled()}}">Save</button>
|
||||
</form>
|
||||
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -31,22 +31,22 @@ to retrieve Buzz activity and comments.
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<div ng:controller="BuzzController">
|
||||
<input ng:model="userId"/>
|
||||
<button ng:click="fetch()">fetch</button>
|
||||
<div ng-controller="BuzzController">
|
||||
<input ng-model="userId"/>
|
||||
<button ng-click="fetch()">fetch</button>
|
||||
<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;">
|
||||
<img ng:src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
|
||||
<a ng:href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
|
||||
<a href ng:click="expandReplies(item)" style="float: right;">
|
||||
<img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
|
||||
<a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
|
||||
<a href ng-click="expandReplies(item)" style="float: right;">
|
||||
Expand replies: {{item.links.replies[0].count}}
|
||||
</a>
|
||||
</h1>
|
||||
{{item.object.content | html}}
|
||||
<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;"/>
|
||||
<a ng:href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
|
||||
<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;"/>
|
||||
<a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
|
||||
{{reply.content | html}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
* <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/settings.html" ng-ext-link>./examples/settings.html</a>
|
||||
* <a href="./examples/welcome.html" ng-ext-link>./examples/welcome.html</a>
|
||||
|
||||
<doc:example module="deepLinking">
|
||||
<doc:source jsfiddle="false">
|
||||
|
|
@ -73,7 +73,7 @@ The two partials are defined in the following URLs:
|
|||
$scope.cancel();
|
||||
}
|
||||
</script>
|
||||
<div ng:controller="AppCntl">
|
||||
<div ng-controller="AppCntl">
|
||||
<h1>Your App Chrome</h1>
|
||||
[ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
|
||||
<hr/>
|
||||
|
|
@ -106,7 +106,7 @@ The two partials are defined in the following URLs:
|
|||
routes.
|
||||
* The {@link api/angular.module.ng.$route $route} service then watches the URL and instantiates the
|
||||
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.
|
||||
* 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.
|
||||
|
|
|
|||
|
|
@ -32,30 +32,30 @@ allow a user to enter data.
|
|||
};
|
||||
}
|
||||
</script>
|
||||
<div ng:controller="FormController" class="example">
|
||||
<div ng-controller="FormController" class="example">
|
||||
|
||||
<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/>
|
||||
<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.state" size="2"
|
||||
ng:pattern="state" required>
|
||||
<input type="text" ng:model="user.address.zip" size="5"
|
||||
ng:pattern="zip" required><br/><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.state" size="2"
|
||||
ng-pattern="state" required>
|
||||
<input type="text" ng-model="user.address.zip" size="5"
|
||||
ng-pattern="zip" required><br/><br/>
|
||||
|
||||
<label>Phone:</label>
|
||||
[ <a href="" ng:click="addContact()">add</a> ]
|
||||
<div ng:repeat="contact in user.contacts">
|
||||
<select ng:model="contact.type">
|
||||
[ <a href="" ng-click="addContact()">add</a> ]
|
||||
<div ng-repeat="contact in user.contacts">
|
||||
<select ng-model="contact.type">
|
||||
<option>email</option>
|
||||
<option>phone</option>
|
||||
<option>pager</option>
|
||||
<option>IM</option>
|
||||
</select>
|
||||
<input type="text" ng:model="contact.value" required/>
|
||||
[ <a href="" ng:click="removeContact(contact)">X</a> ]
|
||||
<input type="text" ng-model="contact.value" required/>
|
||||
[ <a href="" ng-click="removeContact(contact)">X</a> ]
|
||||
</div>
|
||||
<hr/>
|
||||
Debug View:
|
||||
|
|
@ -102,7 +102,7 @@ allow a user to enter data.
|
|||
|
||||
# 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.
|
||||
* For debugging purposes we have included a debug view of the model to better understand what
|
||||
is going on.
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
$scope.name = 'World';
|
||||
}
|
||||
</script>
|
||||
<div ng:controller="HelloCntl">
|
||||
Your name: <input type="text" ng:model="name" value="World"/>
|
||||
<div ng-controller="HelloCntl">
|
||||
Your name: <input type="text" ng-model="name" value="World"/>
|
||||
<hr/>
|
||||
Hello {{name}}!
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,16 +80,16 @@ no connection between the controller and the view.
|
|||
</script>
|
||||
|
||||
<h3>Tic-Tac-Toe</h3>
|
||||
<div ng:controller="TicTacToeCntl">
|
||||
<div ng-controller="TicTacToeCntl">
|
||||
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">
|
||||
<tr ng:repeat="row in board" style="height:15px;">
|
||||
<td ng:repeat="cell in row" ng:style="cellStyle"
|
||||
ng:click="dropPiece($parent.$index, $index)">{{cell}}</td>
|
||||
<tr ng-repeat="row in board" style="height:15px;">
|
||||
<td ng-repeat="cell in row" ng-style="cellStyle"
|
||||
ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button ng:click="reset()">reset board</button>
|
||||
<button ng-click="reset()">reset board</button>
|
||||
</div>
|
||||
</doc:source>
|
||||
<doc:scenario>
|
||||
|
|
|
|||
|
|
@ -724,20 +724,20 @@ var inputDirective = [function() {
|
|||
* @ngdoc object
|
||||
* @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController
|
||||
*
|
||||
* @property {string} viewValue Actual string value in the view.
|
||||
* @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 {string} $viewValue Actual string value in the view.
|
||||
* @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
|
||||
* 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.
|
||||
*
|
||||
* @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} dirty True if user has already interacted with the control.
|
||||
* @property {boolean} valid True if there is no error.
|
||||
* @property {boolean} invalid True if at least one error on the control.
|
||||
* @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} $valid True if there is no error.
|
||||
* @property {boolean} $invalid True if at least one error on the control.
|
||||
*
|
||||
* @description
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in a new issue