ngreactを使用した角度データ変更の再入力コンポーネント

私の反応コンポーネントが使用している角度コントローラにデータを保存していますが、データを変更すると自分のルートコンポーネントである反応コンポーネントが再レンダリングされません私はcomponentWillReceivePropsを使用しようとしていますが、通常の方法ではないので、このコンポーネントは<react-component>と呼ばれていますので、私は働くつもりはないと思います。watch-depth = "reference/value"を試しましたが、コンポーネントの再レンダリングを強制する方法を教えてください。ngreactを使用した角度データ変更の再入力コンポーネント

コントローラ：

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

出典

2016-08-22 Йосиф Михайлов

KEYDOWNハンドラはAngularJSにng-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-23 19:37:19 georgeawg

ngreactを使用した角度データ変更の再入力コンポーネント

答えて

関連する問題