Question

因此，我们正在将Angular 1.3范围汤应用程序提升至1.5标准。但我们注意到了一些奇怪的行为。当我们将$ scope变量传递给组件绑定时，它似乎没有正确地反映组件内对$ 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会在组件中更改，但不会在父控制器的$ scope上更改。这是为什么？

Answer 1

我们正在经历类似的事情。

让我们花费一些时间来解决问题的一个重要概念是所有组件都具有隔离范围。所以理论上这可以防止你提到的'$ scope汤'问题，但实际上这导致需要明确地将数据传入和传出组件，这可能需要一些时间来习惯。

通常，您需要保持数据不可变，即防止子组件直接更改数据（在双向数据绑定改进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行为。 Todd Motto讨论了一种通过克隆数据来打破绑定来克服这个问题的好方法：

$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

为什么在将范围变量传递给组件绑定时，Angular 1.5双向绑定会失败？

1 个答案: