一個裝飾添加到angularjs指令以打字稿

我創建了自己的打字稿裝飾爲組件和進樣和它看起來像這樣一個裝飾添加到angularjs指令以打字稿

@Component(myModule, { 
    selector: 'selector', 
    templateUrl: 'template.html', 
    bindings: { 
    value: '=', 
    }, 
}) 
@Inject('service') 
export class ComponentController { 
    value: string; 

    constructor(private service: Service) {} 
}

凡裝飾代碼

export const Component = function(moduleOrName: string | ng.IModule, options: any): Function { 
    return (controller: Function) => { 
    let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName; 
    let component = angular.extend(options, { controller }); 
    module.component(options.selector, component); 
    }; 
}; 

export const Inject = function(...injections: string[]): Function { 
    return (target: Function) => { 
    target.$inject = injections; 
    return target; 
    }; 
};

它工作正常，現在我想爲指令做同樣的事情，我需要使用編譯或l墨功能，但我不能讓它工作

@Directive(app, { 
    selector: 'selector', 
    templateUrl: 'template.html', 
    scope: { 
    value: '=', 
    }, 
}) 
@Inject('service') 
export class myDirective implements ng.IDirective { 
    value: string; 

    constructor(private service: Service) {} 

    compile(element: ng.IAugmentedJQuery) { 
    return this.service.compile(element); 
    } 
}

的指令裝飾的代碼是

export const Directive = function(moduleOrName: string | ng.IModule, options: any): Function { 
    return (directive: Function) => { 
    let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName; 
    let prueba = angular.extend(options, { directive }) 
    module.directive(options.selector, prueba); 
    }; 
};

當我創建指令，它總是顯示在角庫這個錯誤

參數 'FN' 不是一個函數，得到了對象

它可以用一個裝飾器完成，或者我應該忘記它，並按照通常的方式來做？

謝謝。

來源

2016-08-05 J.J. Bocanegra

另外'像您期望的，因爲不歸options.selector'將無法正常工作。應該注意的是，控制器已經獲得了'$ postLink'掛鉤，並且編譯可以用內嵌模板的'template'函數替換。 – estus

@estus我不明白，我應該在哪裏寫你的代碼？在'return（directive：Function）'裏面？什麼是'新指令（...參數）'在做什麼？它顯示一個錯誤。 –

是的，裏面。它實例化一個類。 '.directive'需要工廠函數直接調用，構造函數應該是'new'ed。目前TS生成的JS代碼允許調用類構造函數，這是以後可能會改變的錯誤行爲。 – estus

應該

export const Directive = function(moduleOrName: string | ng.IModule, selector: string): Function { 
    return (directive: any) => { 
     let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName; 
     let factory = (...args: any[]) => { 
      let options = { 
       controller: function() {}, 
      }; 
      return angular.extend(new directive(...args), options); 
     }; 
     factory.$inject = directive.$inject; 
     module.directive(selector, factory); 
    }; 
}; 

@Directive(app, 'selector') 
@Inject('service') 
export class MyDirective implements ng.IDirective { 
    templateUrl = 'template.html'; 
    scope = { 
     value: '=', 
    }; 
    constructor(private service: Service) {} 
    compile = function(element: ng.IAugmentedJQuery) { 
     return this.service.compile(element); 
    } 
}

來源

2016-08-10 12:47:30 estus

一個裝飾添加到angularjs指令以打字稿

回答

相關問題