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" ctrl="ctrl" />
    </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,
    ctrl: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var ctrl = this.props.ctrl; // get the ctrl
    var btnStyle = {color:'black'}; // default style
       
    if (ctrl.isRed()) //change style 
        {btnStyle.color='red';}

    // for each marker   
    var markers=this.props.list.map(function(marker,i) 
    	{
            return React.DOM.button(
                {onClick: function() 
                     {ctrl.msg(marker.name)},
                 style: btnStyle
                }, marker.name) ;
        } );
    return React.DOM.div(null, markers);
    }

} ) );


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