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

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>

Austin Greco · Accepted Answer · 2015-06-03 17:59:29Z

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)

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related