Remove domElement in examples.
This commit is contained in:
parent
ebbdc5dd9a
commit
65868abf87
|
@ -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": {
|
||||
|
|
|
@ -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.
|
||||
<input (keyup)="myControllerMethod()">
|
||||
|
||||
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.
|
||||
<button (click)="addTodo(todotext.domElement.value)">Add Todo</button>
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
|
||||
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
|
||||
|
||||
|
@ -145,7 +146,7 @@
|
|||
'</li>' +
|
||||
'</ul>' +
|
||||
'<input #textbox (keyup)="doneTyping($event)">' +
|
||||
'<button (click)="addTodo(textbox.domElement.value)">Add Todo</button>',
|
||||
'<button (click)="addTodo(textbox.value)">Add Todo</button>',
|
||||
directives: [angular.For, angular.If]
|
||||
})
|
||||
];
|
||||
|
@ -171,7 +172,7 @@
|
|||
</ul>
|
||||
|
||||
<input #todotext (keyup)="doneTyping($event)">
|
||||
<button (click)="addTodo(todotext.domElement.value)">Add Todo</button>
|
||||
<button (click)="addTodo(todotext.value)">Add Todo</button>
|
||||
`,
|
||||
directives: [For, If]
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue