how to call parent function controller from directive react component angularjs + reactjs? - angularjs

Question

I have angular application and we start using react as render data.we have one problem is how can we call $scope.showUserDetails from directive react component
.I tried using this.props.scope.$parent.showUserDetails(); I have Uncaught TypeError: Cannot read property '$parent' of undefined
react component
/** #jsx React.DOM */
var MYCOMPONENT = React.createClass({
displayName: 'MYCOMPONENT',
handleClick: function (e) {
console.log('You clicked');
this.props.scope.$parent.showUserDetails();
},
render: function (){
var listUser = this.props.data.map(function(item){
return(
React.DOM.div(
{
className: 'panel panel-default staff-reception ' + item.statusType.toLocaleLowerCase() + 'Office',
'ng-click': 'showUserDetails(' + item + ')',
onClick: this.handleClick
},
React.DOM.div(
{
className: 'panel-body'
},
React.DOM.span(null, item.firstName + ' ' + item.lastName + ' ' + item.directDial + ' Ext:' + item.voiceMailExt)
)
)
);
},this);
return (React.DOM.div({className:'col-xs-12 col-md-6 col-lg-4'}, listUser));
}
});
controller
(function () {
'use strict';
var app = angular.module('app');
var ReceptionReactController = function ($scope, ReceptionReactService, $modal) {
$scope.showUserDetails = function (user, index) {
var modalInstance = $modal.open({
templateUrl: 'UserDetails.html',
controller: UserDetailsController,
size: 'lg',
resolve: {
user: function () {
return user;
}
}
});
modalInstance.result.then(function (userUpdatedStatus) {
updateUserStatus(userUpdatedStatus);
}, function () {
});
};
};
app.controller('ReceptionReactController', ['$scope', 'ReceptionReactService', '$modal', '$window', ReceptionReactController]).directive('fastNg', function () {
return {
restrict: 'E',
scope: {
data: '='
},
link: function (scope, el, attrs){
scope.$watch('data', function(newValue, oldValue){
React.render(React.createElement(
MYCOMPONENT, {
data: newValue
}),
el[0]
);
});
}
}
});
}());
view
<fast-ng data="ListTitleUsers.users"></fast-ng>

Answer 1

It seems like you should pass the function you want through the directive's attributes and into the react component's props. Something like this might work:
<fast-ng data="ListTitleUsers.users" show="showUserDetails"></fast-ng>
-
app.controller('ReceptionReactController', ['$scope', 'ReceptionReactService', '$modal', '$window', ReceptionReactController]).directive('fastNg', function () {
return {
restrict: 'E',
scope: {
data: '=',
show: '='
},
link: function (scope, el, attrs){
scope.$watch('data', function(newValue, oldValue){
React.render(React.createElement(
MYCOMPONENT, {
data: newValue,
show: scope.show
}),
el[0]
);
});
}
}
});
-
handleClick: function (e) {
console.log('You clicked');
this.props.show();
},
-
onClick: this.handleClick.bind(this, item)