帶有控制器的Angular 1.5 + TypeScript指令

Question

我正在嘗試使用Angular 1.5和TypeScript 1.8使用控制器創建指令，但它對我不起作用。 我看了很多例子，但我在發球台上遵循了這些例子，但它仍然對我不起作用。 我被詛咒了嗎？

這是代碼：

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顯示以下錯誤：

1. 類“ FooDirective”錯誤地實現了接口“ IDirective”。
2. 屬性“ bindToController”的類型不兼容。
3. 輸入'{foo：string; }“不能分配給'boolean | {[[boundProperty：string]：string; }'。
4. 輸入'{foo：string; }'不可分配為類型'{{[boundProperty：string]：string; }'。
5. 類型'{foo：string;中缺少索引簽名。 }'。

我究竟做錯了什么？

更新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};
}

Answer 1

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

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

Answer 2

TypeScript定義僅接受布爾值似乎是一個問題。

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。