0

我将我的数据存储在我的反应组件正在使用的角度控制器中，问题是当我更改我的数据时，作为我的根组件的反应组件不会重新呈现。我正在尝试使用 componentWillReceiveProps 但是这个组件不是以常规方式调用的，<react-component>所以我认为不会起作用。我尝试了 watch-depth = "reference/value" 但仍然没有帮助。有人能告诉我应该如何强制我的组件重新渲染吗？

控制器：

    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);
            }
        });
...

反应组件：

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>
...
4

1 回答 1

0

应使用 AngularJSng-keydown指令添加 Keydown 处理程序。

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

然后将函数添加到控制器：

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

ng-keydown指令和服务都$timeout与 AngularJS 摘要循环正确集成。

于 2016-08-23T19:37:19.083 回答