Comments (2)
@mackenrou how about this modified version of the Hello example
var app = angular.module( 'app', ['react'] );
app.controller( 'mainCtrl', function( $scope ) {
$scope.person = {
fname: 'Clark', lname: 'Kent'
}
// add function to scope
$scope.changeName = function() {
$scope.person = { fname: 'Bruce', lname: 'Banner' };
};
} );
var Hello = React.createClass( {
propTypes: {
fname: React.PropTypes.string.isRequired,
lname: React.PropTypes.string.isRequired,
changeName: React.PropTypes.func
},
onClick: function( e ) {
// process event here
// now call function from props
// this is the change name function declared on the controllers scope
this.props.changeName();
},
render: function() {
return <div>
Hello {this.props.fname} {this.props.lname}
<button onClick={this.onClick}>Change Name</button>
</div>
);
}
} );
app.value( "Hello", Hello );
app.directive( 'hello', function( reactDirective ) {
return reactDirective( Hello );
} );
View
<div ng-controller="mainCtrl" ng-app="app">
<hello fname="person.fname" lname="person.lname" change-name="changeName"/>
</div>
from ngreact.
Ups! It's very simple!
Thank you.
from ngreact.
Related Issues (20)
- CHANGES.md missing 0.5.0 release HOT 2
- react/react.js and react-dom.js are missing from bower folder HOT 1
- Property name normalization
- Failed prop type errors
- How to fix these warnings HOT 1
- JSXTransformer is not present in bower components after installing ngReact HOT 3
- Component is re-rendered on every prop change on the angular side HOT 1
- How to use a static value as props? HOT 1
- ngReact causes react-transition-group to misbehave
- Any thoughts on how to handle props that are not passed HOT 1
- property name case matters (in html template) HOT 3
- make reactDirective composable (feature)
- Event propagation order
- Does it work with Angular version > 2? HOT 1
- Lexer error when using special character in props
- Subscribing angular events in react components
- Current project status HOT 1
- Cannot read property 'render' of undefined HOT 1
- React Object component support HOT 2
- Support for React Hooks 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 ngreact.