為什么React.Js模板和Angular模型之間沒有綁定？

Question

我正在嘗試將Angular和React.JS混合使用。 您可以在這里看到我的代碼。 我見過的大多數示例都涉及以基本Angular編寫的輸入，然后像本示例一樣以React編寫的輸出。 我正試圖相反。 我有兩個輸入字段，它們是在指令中創建的React組件，然后是使用Angular完成的模型輸出。

我無法獲得輸出以反映模型中的更改。 該模型為$scope.formData = {name: "name", email: "email"};

我試圖按照此視頻中的示例進行操作，並在指令中創建了一個隔離范圍

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

然后將正確的值傳遞給React模板。 它似乎沒有任何影響。 我的輸入未連接到formData。 在我的非反應版本中，模型數據會立即填寫輸入，而輸出將反映輸入的更改。

因為以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}沒問題，我在form.html的幾個地方扔了<input ng-model="formData.name"> ，並且沒有問題。 雙向綁定在那里工作。

編輯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組件中所做的更改以傳播回角度，則需要確保傳遞給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函數，它將在模型上正確更新。