如何使用TypeScript在Angular指令中綁定屬性？

使用AngularJS 1.5和TypeScript我正在編寫一個指令，並希望在我的視圖中定義一個屬性，該屬性被傳遞到指令中，然後用於輸出到模板。我試圖遵循一些例子，如this one，但我的指令模板沒有綁定到屬性。從頁面如何使用TypeScript在Angular指令中綁定屬性？

HTML：

<my-directive name="John"></my-directive>

指令：

module myApp.directives { 
    "use strict"; 

    export class myDirective { 
     static directiveId = 'myDirective'; 
     scope = {}; 
     bindToController = { 
     name: '=' 
     }; 
     restrict = 'EA'; 
     controller = controllers.NameController.ControllerId; 
     controllerAs = 'vm'; 
     template = '<h1>Name: {{ vm.name }}</h1>'; 

     static $inject = []; 
     constructor() { } 

     static instance() { 
     return new myDirective(); 
     } 
    } 
    angular.module("myApp").directive(myDirective.directiveId, myDirective.instance); 
}

控制器（真的不知道我需要在構造函數什麼？）：

module myApp.controllers { 
    "use strict"; 

    export class NameController { 
     static ControllerId = "NameController"; 
     name: string; 

     constructor(name: string){ 
      this.name = name; 
     } 
    } 

    angular.module("myApp").controller(NameController.ControllerId, NameController); 
}

來源

2016-03-02 Scott Ferguson

你bindToController應該接受一個字符串litteral而不是一個綁定屬性，即

bindToController = { name: '@' };

的=將試圖評估一個名爲John在你的語法屬性，它不存在。

此外，您的構造函數不需要任何參數，而對於我所看到的可以完全刪除。

來源

2016-03-03 07:56:38

謝謝！這解決了我的問題。 –

不客氣！ –

我不知道這有助於，既沒有角度合併NameController的實例和$範圍在一起，但我可以成像的名稱屬性NameController實例映射$ scope.name。

你會嘗試刪除：

name: string; 

constructor(name: string) { 
    this.name = name; 
}

？

來源

2016-03-02 20:04:29 uthomas

當我刪除它時，我的視圖改變m「Name：{{vm.name}}」（大括號可見）顯示爲「Name：」（沒有大括號，也沒有數據）。 –

我相信你需要的屬性應該在指令作用域上定義，因爲你已經在使用獨立作用域了。看起來不像你在任何地方使用bindToController。

取而代之的是：

scope = {}; 
bindToController = { 
    name: '=' 
};

嘗試用這種（舊的語法）：

scope = { 
    name: '=' 
};

此外，在控制器的參數的構造函數將無法運行，因爲你不是new -ing起來該類（在下面的行中，從您的第二個代碼片段）

angular.module("myApp").controller(NameController.ControllerId, NameController);

來源

2016-03-03 07:58:15 Abhishek

如何使用TypeScript在Angular指令中綁定屬性？

回答

相關問題