Angular 1.5 + TypeScript指令與控制器

我想創建一個指令與控制器使用Angular 1.5和TypeScript 1.8，但它不會爲我工作。我看了一大堆例子，但我正在關注這些例子，但它仍然不適合我。我詛咒？Angular 1.5 + TypeScript指令與控制器

下面是代碼：

export class FooController implements angular.IController { 
    static $inject = ['myService', '$state']; 

    constructor(private myService: Services.MyService, private $state: angular.ui.IStateService) { 
    } 

    public foo: Services.Dtos.Foo; 
    public bar; 

    $onInit() { 
     if (!this.foo) return; 

     this.bar = this.$state.href('app.bar', {id: this.foo.id}); 
    } 
} 

export class FooDirective implements angular.IDirective { 
    public restrict = 'E'; 
    public replace = true; 
    public scope = {}; 
    public templateUrl = 'content/templates/foo.template.html'; 
    public controller = FooController; 
    public controllerAs = 'ctrl'; 
    public bindToController = { 
     foo: '<', 
    }; 
}

上FooDirective它錯誤說以下內容：

班 'FooDirective' 正確實現了接口 'IDirective'。
屬性類型'bindToController'不兼容。
鍵入'{foo：string; }'不能指定爲鍵入'boolean |「 {[boundProperty：string]：string; }」。
鍵入'{foo：string; }'不能分配爲'{[boundProperty：string]：string; }」。
索引簽名在'{foo：string; }」。

我在做什麼錯？

UPDATE 2017年2月15日 IDirective看起來像這樣（從angular.d.ts文件）：

interface IDirective { 
    compile?: IDirectiveCompileFn; 
    controller?: string | Injectable<IControllerConstructor>; 
    controllerAs?: string; 
    /** 
    * @deprecated 
    * Deprecation warning: although bindings for non-ES6 class controllers are currently bound to this before 
    * the controller constructor is called, this use is now deprecated. Please place initialization code that 
    * relies upon bindings inside a $onInit method on the controller, instead. 
    */ 
    bindToController?: boolean | {[boundProperty: string]: string}; 
    link?: IDirectiveLinkFn | IDirectivePrePost; 
    multiElement?: boolean; 
    priority?: number; 
    /** 
    * @deprecated 
    */ 
    replace?: boolean; 
    require?: string | string[] | {[controller: string]: string}; 
    restrict?: string; 
    scope?: boolean | {[boundProperty: string]: string}; 
    template?: string | ((tElement: JQuery, tAttrs: IAttributes) => string); 
    templateNamespace?: string; 
    templateUrl?: string | ((tElement: JQuery, tAttrs: IAttributes) => string); 
    terminal?: boolean; 
    transclude?: boolean | 'element' | {[slot: string]: string}; 
}

來源

2017-02-15 Mohamed Nuur

我複製粘貼你的代碼到一個Angular項目並沒有得到一個錯誤。你使用什麼類型的IDirective？請將它們添加到您的問題。 –

@Sabastin，我添加了類型。這令我非常困惑。我不確定它爲什麼不起作用。 –

根據此： http://stackoverflow.com/questions/22077023/why-cant-i-indirectly-return-an-object-literal-to-satisfy-an-index-signature-re解決方案是明確將範圍和bindToController轉換爲'{[boundProperty：string]：string}'並且錯誤消失。 –

的指令應該是返回一個配置對象的函數。我會寫這樣的指令：

export const fooDirective =(): angular.IDirective => { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {}, 
     templateUrl: 'content/templates/foo.template.html', 
     controller: FooController, 
     controllerAs: 'ctrl', 
     bindToController: { 
      foo: '<' 
     } 
    }; 
};

我也建議你看看新的組件API。它大大簡化了創建新組件的工作，並且默認使用了許多最佳實踐，如controllerAs。

https://docs.angularjs.org/guide/directive
https://docs.angularjs.org/guide/component

來源

2017-02-15 08:05:08 larslonne

這個答案根本沒有幫助。問題是TypeScript抱怨我的'bindToController'不正確。我不確定發生了什麼事。 –

這似乎是打字稿定義只接受布爾問題。

export class FooDirective implements angular.IDirective { 
    public restrict = 'E'; 
    public replace = true; 
    public scope = {}; 
    public templateUrl = 'content/templates/foo.template.html'; 
    public controller = FooController; 
    public controllerAs = 'ctrl'; 
    public bindToController:any = { 
     foo: '<', 
    }; 
}

這會修復錯誤，另一方面它不會檢測bindToController。

來源

2017-02-17 13:07:14 Vlada

你不需要寫'公共'七次（7）這個詞，除了它降低了可讀性以外，它對你的代碼沒有影響。 –

Angular 1.5 + TypeScript指令與控制器

回答

相關問題