ngReact #16

ngReact issue # example

HTML

<script src="http:////cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
<script src="https://rawgit.com/davidchang/ngReact/master/ngReact.js"></script>
<body ng-app="app" ng-controller="mainCtrl as ctrl">
    <div>
        <poi-list list="ctrl.markers" />
    </div>
</body>

JavaScript

var app = angular.module( 'app', ['react'] );

app.controller( 'mainCtrl', function( $scope ) 
{
    this.markers= [{name:'old sponge'},
                   {name:'klide'}
                  ];

    this.msg = function(name)
    { alert(name); }
    
    this.isRed = function()
    {return true;}
} );




app.value( "PoiList", React.createClass( {
  propTypes: {
    list: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var markers=this.props.list.map(function( marker, i ) 
    	{
            return React.DOM.button(
     /*{ng-click: ctrl.msg({marker.name}),                      
        ng-style: {color:'red' : ctrl.isRed()}} 
     */
                                 null, marker.name) ;
        } );
    return React.DOM.div(null, markers);
    }

} ) );


app.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );