Rerender component on angular data change using ngreact

Question

I'm storing my data in angular controller, which my react components are using, the problem is that when I change my data, my react component which is my root component won't rerender.I'm trying to use componentWillReceiveProps but this component is called with <react-component> not on the regular way so I don't thinks is gonna work.I tried watch-depth = "reference/value" but still didn't helped.Can someone tell me how should I force my component to rerender ?

controller:

    app.controller('MainCtrl', function ($scope) {
        $scope.myComponent = {};
        console.log($scope.myComponent);
        console.log(document.body.children[0].children[0]);
        $scope.resultProps = {
            item:[]
        }
        $scope.firstArrayProps =  {
            item:[],
            result:$scope.resultProps
        }
        $scope.secondArrayProps =  {
            item:[],
            result:$scope.resultProps
        }

        $(document.body.children[0].children[0]).keydown(function(e) {
            console.log('voala');
            var key = e.which || e.keyCode;
            if(key == 46) {
                console.log('voala');
                setTimeout(function () {
                    $scope.firstArrayProps.item.length = 0; //HERE IM CHANGING DATA
                }, 1000);
            }
        });
...

react component:

var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
....

html:

<body  ng-app="app" ng-controller="MainCtrl as mainCtrl">

<div class="tableWrapper">
    <react-component name="DiaryTable" props="firstArrayProps"  watch-depth="value"/>
</div>

<button class="myMergeButton" id="mergeButton" ng-click="runMerge()">Merge diaries</button>

<div class="tableWrapper">
    <react-component name="DiaryTable" props="secondArrayProps" watch-depth="value"/>
</div>
...

score 0 · Answer 1 · answered Aug 23 '16 at 19:37

Keydown handlers should be added by using the AngularJS ng-keydown directive.

<div class="tableWrapper" ng-keydown="voala($event)">
    <react-component name="DiaryTable" 
                     props="firstArrayProps"  
                     watch-depth="value">
    </react-component>
</div>

Then add the function to the controller:

app.controller('MainCtrl', function ($scope, $timeout) {

    $scope.voala = function(e) {
        console.log('voala');
        var key = e.which || e.keyCode;
        if(key == 46) {
            console.log('voala');
            $timeout(function () {
                //HERE IM CHANGING DATA
                $scope.firstArrayProps.item.length = 0;
            }, 1000);
        }
    });
});

Both the ng-keydown directive and the $timeout service are properly integrated with the AngularJS digest cycle.

Rerender component on angular data change using ngreact

1 Answers1