角1.5組件上雙向綁定變化

初始化我試圖重新初始化組件時雙向綁定對象的變化。角1.5組件上雙向綁定變化

<ul class="nav nav-pills nav-stacked"> 
    <li ng-repeat="tab in tabs" 
     ng-class="{'active': activeTab.id === tab.id }"> 
     <a href="" ng-click="setActive(tab)"> {{ tab.title }}</a> 
    </li> 
    </ul> 

    <my-component tab="activeTab"></my-component> 


app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=' 
    }, 
    controller: function() { 
    var init = function() { 
     console.log('hi') 
    } 
    init() 
    } 
})

我怎樣才能確保init()被稱爲每次activeTab.id變化？

我看着lifecycle hooks並且不似乎是答案。

here是代碼plunkr

來源

2016-09-22 user2954587

使用$範圍。$表（）。 –

@JBNizet有沒有辦法做到這一點'$範圍。$ watch'？理想情況下，在組件 – user2954587

不，我知道的沒有'$ scope'，但你可以在組件中使用範圍：https://plnkr.co/edit/DpwlIhNLYMypcehpViP1?p=preview –

app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=', 
    tabChange:'&' 
    }, 
    controller: function($scope) { 
    $scope.$watch(
    function() { return $scope.$ctrl.tab; }, 
    function(newValue, oldValue) { 
    init(); 
    } 
); 

var init = function() { 
     console.log('hi'); 
    } 
    init() 
    } 
})

來源

2016-09-23 10:29:03

您都應使用組件的$doCheck方法：

function myComponentController(){ 

    function init() { 
    console.log('hi') 
    } 

    var previousTabId; 
    this.$doCheck = function(){ 
    if (this.tab && previousTabId !== this.tab.id) { 
     previousTabId = this.tab.id; 
     init(); 
    } 
    }.bind(this); 

} 

app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=' 
    }, 
    controller: [myComponentController] 
})

來源：https://docs.angularjs.org/guide/component

$doCheck() - 叫上每一圈消化週期。提供機會來檢測並採取行動。您希望響應您檢測到的更改而採取的任何操作必須從這個鉤子調用;執行此操作對$onChanges爲時無效。例如，如果您希望執行深平等檢查，或檢查Date對象，這不會被AngularJS的變化檢測器檢測到的變化，因此不觸發$onChanges此掛鉤可能是有用的。這個鉤子被調用時沒有參數;如果檢測到更改，則必須將以前的值（）存儲爲當前值。

據我理解你的用例，你只需要單向綁定。如果你這樣做，你應該只是使用$onChanges方法（它被保留，以單向綁定屬性）：

$onChanges(changesObj) - 只要單向綁定更新調用。 changesObj是一個散列，其鍵是已更改的綁定的屬性的名稱，值是 { currentValue, previousValue, isFirstChange() }形式的對象。使用這個鉤子組件內觸發更新，如克隆結合的值，以防止外值的偶然的突變。

而且你應該瞭解$onInit，$onDestroy和$postLink這是真正有用的。

來源

2017-02-01 11:05:04

角1.5組件上雙向綁定變化

回答

相關問題