如何使用AngularJS和TypeScript在控制器和指令之間使用雙向數據綁定

Question

我想將我的表與它們的過濾器和排序功能外包爲指令。 因爲我想用雙向-數據綁定我這樣做：

public bindToController = { 
     cars: "=" 
}; 

這是因爲汽車上的點擊表格中的時候，我改變這輛車的屬性，我需要的控制器，其中cars來源於此。

export class CarsTableDirectiveController implements ng.IComponentController { 
    public cars; 


    public $onInit() { 
     console.log(this.cars); 
    } 
    constructor() { 
     console.log(this.cars); 
    } 

} 


export class CarsTable implements ng.IDirective { 

    public restrict: string = "E"; 
    public scope = {}; 
    public controller = CarsTableDirectiveController; 
    public controllerAs: string = '$ctrl'; 
    public bindToController = { 
     cars: "=" 
    }; 

    static instance(): ng.IDirective { 
     return new CarsTable(); 
    } 

    template: string = require<string>('./cars-table.html'); 

} 

我打電話這樣說：

<projects-table cars="ctrl.cars"></projects-table> 

的汽車數據表中顯示，但是當我登錄cars它總是不確定的。 我在做什麼錯？如何實現對象cars的雙向數據綁定並使用CarsTableDirectiveController中的變量cars？

Answer 1

你的代碼看起來不錯，這讓我覺得汽車不是馬上可用（它們是否來自AJAX調用？）。因此當constructor和$onInit火災時，汽車還沒有。

您可以使用ng-if等到汽車存在創建指令：

<projects-table ng-if="cars.length" cars="cars"></projects-table> 

現在你應該看到汽車時$onInit火災（但不一定當constructor火災）。