Question

我正在尝试混合使用Angular和React.JS。您可以看到我的代码here。我见过的大多数例子都涉及用基本Angular编写的输入，然后用this example中的React编写输出。我试图做相反的事情。我有两个输入字段作为在指令中创建的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}}显示不会更改。

为什么我的display {{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}}，没有任何反应。它根本不会触发手表，我不明白为什么。

Answer 1

通过第二次修改，您可以将renderComponent来电置于scope.$watch内。这将确保每次监视变量formData.name发生更改时都会重新呈现react组件。

但是，如果您正在查找在React Component中进行的更改以将其传播回角度，则需要确保您传递给回复的回调函数具有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函数，它就会在模型上正确更新。

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

1 个答案: