Question

我有角度应用程序，我们开始使用react作为渲染数据。我们有一个问题是如何从指令反应组件调用$ scope.showUserDetails 我尝试使用this.props.scope。$ parent.showUserDetails（）; I have Uncaught TypeError: Cannot read property '$parent' of undefined

反应成分

 /** @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));
    }
});

控制器

(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]
                        );
                });
            }
        }
    });

}());

查看

 <fast-ng data="ListTitleUsers.users"></fast-ng>

Answer 1

似乎你应该通过指令的属性传递你想要的功能，并进入react组件的道具。这样的事情可能有用：

<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)

如何从指令反应组件angularjs + reactjs调用父函数控制器？

1 个答案: