为什么 React.Js 模板和 Angular 模型之间没有绑定？答案

【问题标题】：Why is there no binding between React.Js template and Angular model?为什么 React.Js 模板和 Angular 模型之间没有绑定？
【发布时间】：2014-08-13 22:51:43
【问题描述】：

我正在尝试混合使用 Angular 和 React.JS。你可以看到我的代码here。我见过的大多数示例都涉及使用基本 Angular 编写的输入，然后使用 React 编写的输出，例如 this example。我正试图做相反的事情。我有两个输入字段作为在指令中创建的 React 组件，然后是使用 Angular 完成的模型输出。

我无法获得反映模型变化的输出。模型为$scope.formData = {name: "name", email: "email"};

我尝试按照this video 中的示例，并在指令中创建一个隔离范围

scope: {
            formname: '=formname',
            formemail:'=formemail'
        },

然后将正确的值传递给 React 模板。它似乎没有任何影响。我的输入未连接到 formData。在我的non-React 版本中，模型数据立即填充输入，输出反映输入的更改。

因为以 Angular 样式绑定数据被破坏，我试图让 React 组件以更 Reactish 的方式更新模型。我在控制器中写了一个名为 update_model 的函数，

$scope.update_model = function(data_type, updated_data){
                $scope.$apply(function() {
                    $scope.formData[data_type] = updated_data;
                });
                console.log($scope.formData);
            }

然后，我在链接函数中使用 scope.update_model 通过指令将该函数传递给 React 模板。

link: function(scope, element) {
        React.renderComponent(Form_Profile_Component({update_model: scope.update_model, name_label: 'name', email_label: 'email', name_data: scope.formname, email_data: scope.formemail}), element[0]);
    }

现在在模板中，输入元素具有 onChange 事件检测器，它将调用它并更新模型。模型应该显示在页面底部，带有

    <pre>
        {{ formData }}
    </pre>

console.log 显示 formData 发生了变化，但 {{formData}} 显示没有变化。

为什么我的显示 {{formData}} 不显示实际 formData 对象中发生的情况？

编辑：为了确保 {formData} 没有问题，我将 <input ng-model="formData.name"> 扔到了 form.html 的几个地方，没有问题。双向绑定在那里工作。

编辑 2： 我尝试将以下代码添加到指令中。

link: function(scope, element) {
            scope.$watch('formData.name', function(newVal, oldVal) {
              console.log("---");
              React.renderComponent(Form_Profile_Component({update_model: scope.update_model, name_label: 'name', email_label: 'email', name_data: scope.formData.name, email_data: scope.formData.email}), element[0]);
            });
        }

我相信当formData发生变化时，它会调用这个函数并更新React组件，或者至少打印'---'到控制台。当我使用 React 输入或正确的输入时，什么都没有发生，这并不奇怪。但是当我尝试第一次编辑的工作输入时，它确实改变了{{formData}}，没有任何反应。它根本不会触发手表，我不明白为什么。

【问题讨论】：

如果你能在上下文中发布你的完整代码将会很有用。我不确定我是否了解您的指令树是如何设置的。
所有代码都在我在顶部链接的 Plunker 中。主应用程序位于 index.html 中，然后将 form.html 插入其中。 app.js 有路由器、控制器和指令。 form-profile.js 是 React 模板。
啊，抱歉，我没有看到那个链接。现在看看:)

标签： javascript angularjs data-binding angularjs-directive reactjs

【解决方案1】：

您在第二次编辑中走在正确的轨道上，您将renderComponent 调用放在scope.$watch 中。这将确保每次监视变量 formData.name 更改时都会重新渲染 react 组件。

但是，如果您正在寻找您在 React 组件中所做的更改以传播回 angular，您需要确保您传递给 react 的回调函数中有 scope.$apply() 调用。要么封装更改，要么就在更改之后。

这是一个简单的例子：

在您的控制器中：

$scope.myVar  = 'foo';
$scope.setVar = function(value) {
    $scope.myVar = value;
    $scope.$apply();
};

在指令的链接函数中（假设没有限制范围，否则根据需要更改名称）

scope.$watch('myVar', function() {
    React.renderComponent(
        MyComponent({
            myVar:  scope.myVar,
            setVar: scope.setVar
        }),
        element.get(0)
    );
});

然后只需在你的 react 组件中使用新值调用 this.props.setVar 函数，它就会在模型上正确更新。

【讨论】：