使用ngreact重新渲染角度数据更改组件
使用ngreact重新渲染角度数据更改组件
提问于 2016-08-23 06:30:28
我将我的数据存储在我的react组件正在使用的角度控制器中，问题是当我更改我的数据时，我的react组件不会重新呈现。我正在尝试使用componentWillReceiveProps，但是这个组件不是以常规的方式使用<react-component>调用的，所以我认为它不会工作。我尝试了helped.Can -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);
}
});
...react组件：
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>
...回答 1
Stack Overflow用户
发布于 2016-08-24 03:37:19
应该使用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摘要周期正确集成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39089685
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号