javascript - 为什么 React.Js 模板和 Angular 模型之间没有绑定(bind)？

Question

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

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

我尝试按照 this video 中的示例进行操作, 并在指令中创建一个独立的作用域

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

然后将正确的值传递给 React 模板。好像没什么影响。我的输入未连接到 formData。在我的 non-React在此版本中，模型数据立即填充输入，输出反射(reflect)输入的变化。

因为以 Angular 样式绑定(bind)数据会被破坏，我尝试让 React 组件以更 Reactish 的方式更新模型。我在 Controller 中写了一个函数叫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 的几个地方，没有问题。双向绑定(bind)在那里起作用。

编辑 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}} ， 什么都没发生。它根本不会触发 watch ，我不明白为什么。

Answer 1

您在第二次编辑中将 renderComponent 调用置于 scope.$watch 中，您的方向是正确的。这将确保每次监视变量 formData.name 更改时都会重新呈现 react 组件。

但是，如果您正在寻找您在 React 组件中所做的更改以传播回 Angular，您需要确保您传递给 React 的回调函数具有 scope.$apply() 调用它。封装更改，或紧随其后。

这是一个简单的例子:

在你的 Controller 中:

$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 函数，它就会在模型上正确更新。