爲什麼在將範圍變量傳遞給組件綁定時，Angular 1.5雙向綁定失敗？

Question

因此，我們正在將我們的Angular 1.3範圍湯應用程序升級到1.5標準。但是我們注意到了一些奇怪的行爲。當我們將一個$ scope變量傳遞給一個組件綁定時，它似乎不能正確反映組件在$ scope變量中所做的任何更改。

我們基於$範圍控制器：

app.controller('ParentCtrl', function ($scope) { 

     $scope.dates = [...array of dates...] 

     $scope.focusDate = new Date() 

}) 

我們的組件標籤：

<section-dates dates="dates" focus-date="focusDate"></section-dates> 

組件本身：

app.component("sectionDates", { 
bindings: { 
    dates: "=", 
    focusDate: "=" 
}, 
controller: function() { 
    this.onClickADate = function (date) 
    { 
     this.focusDate=date 
    } 
... 
} 

當點擊一個新的日期，focusDate變化該組件，但不在父控制器的$範圍內。爲什麼是這樣？

Answer 1

我們正在經歷類似的事情。

一個重要的概念，花了我們一些時間來包裝我們的頭，所有組件都隔離$範圍。所以理論上這可以防止你提到的'$ scope soup'問題，但實際上這導致需要顯式地將數據傳入和傳出需要一些習慣的組件。

一般而言，您會希望保持數據不可變，即防止子組件直接更改數據（除非在雙向數據綁定改進UI的某些特定情況下）。

這裏的想法是將數據傳遞到使用單向數據綁定這樣的組件：

...  
bindings: { 
    oneWayBindingInput: '<' 
}, 
... 

再通事件背出的子組件來再由母公司進行處理：

...  
bindings: { 
    oneWayBindingInput: '<' 
    onEventOutput: '&' 
}, 
... 

所以你的情況，你可以嘗試這樣的事：

組件標籤（在父模板）：

<section-dates dates="dates" on-update="handleUpdateEvent($event)"></section-dates> 

組件：

app.component("sectionDates", { 
bindings: { 
    dates: "<", 
    onUpdate: "&" 
}, 
controller: function() { 
    this.onClickADate = function (date) 
    { 
     this.onUpdate({$event: {date: date}); 
    } 
... 
} 

父控制器：

app.controller('ParentCtrl', function ($scope) { 
    $scope.dates = [...array of dates...]; 
    $scope.handleUpdateEvent = function(event) { 
     $scope.date = event.date; 
    }; 
}) 

只是快速筆記。如果單向數據綁定到組件的數據是一個對象，它的屬性仍然是可變的。單向數據綁定在這裏沒有被破壞，這是典型的JavaScript行爲。託德座右銘討論一個偉大的技術，通過克隆數據來克服這種打破綁定：

$onChanges() = function(changes) { 
    if(changes.user) { 
     this.user = angular.copy(this.user); 
    } 
}; 

更多的例子，看到有用成分模式這些引用： https://toddmotto.com/exploring-the-angular-1-5-component-method/ http://dfsq.info/site/read/angular-components-communication