Comments (6)
Here is an Angular 2 app which demonstrates this:
import {bootstrap} from 'angular2/bootstrap';
import {Component, View, EventEmitter} from 'angular2/core';
@Component({ selector: 'user', inputs: ['user'], outputs: ['userChanged'] })
@View({ template: '<input [value]="user" (keyup)="updateUser($event)"> {{user}}' })
class User {
user: String;
userChanged: EventEmitter;
constructor() {
this.userChanged = new EventEmitter();
}
updateUser(event : any) {
this.user = event.srcElement.value;
//this.userChanged.next(event.srcElement.value);
}
}
@Component({
selector: 'hello-app',
template: `
<div class="greeting">{{greeting}} world!</div>
<button class="changeButton" (click)="changeGreeting()">change greeting</button>
<user [user]="greeting" (user-changed)="greeting = $event"></user>
`,
directives: [User]
})
export class HelloCmp {
greeting: string;
constructor() {
this.greeting = 'Hello';
}
changeGreeting(): void { this.greeting = 'howdy'; }
}
export function main() {
bootstrap(HelloCmp);
}
When you type in the user input box the inner value changes but not the outer one because the key up handler is updating the value of user
in the template context.
If you then click the change greeting button then both the the outer and inner values are updated.
If you swap the commenting in the updateUser
method then changes inside get propagated out (and back in again).
from ng-forward.
Thanks I'll check this out this week after I finish the testing utils stuff.
from ng-forward.
I looked at this a bit. I almost started to fix it but realized I wanted more tests around this stuff first so I could refactor without fear :). I'll add those tests and then play around with fixing this. We may have to change to a $watch approach (mentioned to my by Mike, via Pete). Though I'm not happy about creating X number of watchers per input. I've really liked how setters have replaced watchers in a lot of ways in my current a1atscript app. I'm not sure if you guys have stumbled onto it too, but you can do a lot of the same stuff in setters that you can do in watchers and I assume you get the performance boost of not having the extra watcher.
from ng-forward.
I would rather put our efforts into getting one-way binding into the core of Angular, although this would mean that ng-forward would only work with 1.5
from ng-forward.
Too late! I fixed it. It really kind of needed it. The way I was doing it was all weird, but I realized it could be so much simpler and still only use getters and setters.
from ng-forward.
Plus it fixed another bug I was having where you could not set a default value for inputs...
from ng-forward.
Related Issues (20)
- AsyncRoute for ng-forward HOT 1
- Use angular component HOT 1
- Resolve and Inject value parameter needs to be optional for static class methods
- emit is not a function on EventEmitter HOT 1
- can i use the new angular component router
- Problems using angular2 with ng-forward HOT 1
- ng-upgrade upgradeNg1Component does not work well HOT 2
- attribute binding HOT 4
- Ping! HOT 2
- $state and $location undefined ... need programmatic way to change URL for routing HOT 1
- ng-forward/testing still has issues
- how to write tests ? HOT 2
- Impossible to test a component with templateUrl HOT 2
- Implement the lifecycle hooks as interface
- Cannot mock dependencies HOT 3
- ui-router-alpha.5 problems HOT 3
- Could add easy @ViewChild in Typescript/ES6
- Are there any drawbacks for using the ng-upgrade on production? HOT 3
- Roadmap for ng-forward HOT 1
- EventEmitter.next() is still called EventEmitter.emit() in documentation [Easy Fix] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-forward.