honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove domElement in examples.

This commit is contained in:
David East 2015-04-22 06:03:21 -07:00
parent ebbdc5dd9a
commit 65868abf87
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/js/latest/guide/_data.json
View File

@ -16,7 +16,7 @@
"user-input": {
"title": "User Input",
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all of the ins and outs of using the event syntax."
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
},
"making-components": {

15
public/docs/js/latest/guide/user-input.jade
View File

@ -4,17 +4,18 @@
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
.l-main-section
h2#section-responding-to-user-input Responding to user input
h2#section-responding-to-user-input Responding to user input with event syntax
p.
You can make your application respond to user input by associating events with functions in your controller
using the event syntax using <code>(event)</code> to surround the name of an event.
You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
p.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
pre.prettyprint.lang-html
code.
&lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables
p.
As in previous examples, you can make element references available to other parts of the template as a local
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
@ -96,11 +97,11 @@
p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.domElement.value.</code>
<code>todotext.value.</code>
pre.prettyprint.lang-html
code.
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
@ -145,7 +146,7 @@
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.domElement.value)"&gt;Add Todo&lt;/button&gt;',
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
@ -171,7 +172,7 @@
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`,
directives: [For, If]
})