Angularjs 如何在工作中提高手表的深度_Angularjs_Reactjs

Angularjs 如何在工作中提高手表的深度

angularjs reactjs

Angularjs 如何在工作中提高手表的深度,angularjs,reactjs,Angularjs,Reactjs,目前，我尝试将AngularJS应用程序与React集成我使用以下库通过使用watchdepth，我希望当AngularJS的范围数据发生变化时，React组件将重新呈现自己我的代码如下所示 index.html 你好，反应 var-app=angular.module（'myApp'，['react']）；应用程序控制器（'myCtrl'，函数（$scope）{ $scope.firstName=“John”； $scope.lastName=“Doe”； setTimeout（函数

目前，我尝试将

AngularJS

应用程序与

React

集成

我使用以下库

通过使用

watchdepth

，我希望当AngularJS的范围数据发生变化时，React组件将重新呈现自己

我的代码如下所示

index.html


你好，反应
var-app=angular.module（'myApp'，['react']）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.firstName=“John”；
$scope.lastName=“Doe”；
setTimeout（函数（）{
警报（'分配数据！如何触发反应组件？'）；
$scope.data={数据：[
{作者：“皮特·亨特”，正文：“这是一条评论”}，
{作者：“Jordan Walke”，正文：“这是另一条评论”}
]};       
}, 5000);
});
app.value（'CommentBox'，CommentBox）；
名字：

姓氏：



全名：{{firstName+“”+lastName}

commentbox.js

//tutorial4.js
var Comment=React.createClass({
render:function（）{
返回(
{this.props.author}
{this.props.children}
);
}
});
//教程10.js
var CommentList=React.createClass({
render:function（）{
console.log（“调试”）；
console.log（this.props）；
var commentNodes=this.props.data.map（函数（注释）{
返回(
{comment.text}
);
});
返回(
{commentNodes}
);
}
});
//教程1.js
var CommentBox=React.createClass({
render:function（）{
返回(
评论
);
}
});

无论我使用的是

watch depth=“reference”

还是

watch depth=“value”

，都没有区别<当值分配给

$scope.data

有什么我遗漏的吗？

使用

$scope.data.push（）

添加新数据并观察depth=“value”

它将重新渲染

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Hello React</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/ngReact/ngReact.min.js"></script>
    <script src="build/commentbox.js"></script>
</head>
<body>

<script>
    var app = angular.module('myApp', ['react']);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";

        setTimeout(function() { 
            alert('assign data! how to trigger react component?');
            $scope.data = {data : [
                {author: "Pete Hunt", text: "This is one comment"},
                {author: "Jordan Walke", text: "This is *another* comment"}
            ]};       
        }, 5000);
    });
    app.value('CommentBox', CommentBox);
</script>

<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <react-component name="CommentBox" props="data" watch-depth="reference"/>
</div>

</body>
</html>

// tutorial4.js
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

// tutorial10.js
var CommentList = React.createClass({
  render: function() {
    console.log("DEBUG");
    console.log(this.props);
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {


    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
      </div>
    );
  }
});