2016-08-05 2 views
0

я создал свой собственный машинопись декоратора для компонента и Вводят и это выглядит как этотДобавить декоратор к 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); 
    }; 
}; 

И когда я создаю директиву, он всегда показывает эту ошибку в угловом библиотеке

Аргумент 'п' не является функцией, есть объект

Это можно сделать с помощью декоратора или я должен его забыть и сделать это обычным способом?

Спасибо.

+0

Кроме того, 'options.selector' не будет работать, как вы ожидаете, потому что не нормируется. Следует заметить, что у контроллера уже есть крючок $ postLink', и компиляция может быть заменена функцией 'template' для встроенных шаблонов. – estus

+0

@estus Я не понимаю, где я должен писать свой код? Внутри 'return (directive: Function)'? И что такое '' новая директива (... args) 'делать? Он показывает ошибку. –

+0

Да, внутри. Он создает класс. '.directive' ожидает функцию фабрики, которая будет вызываться напрямую, конструкторы должны быть' new'ed. В настоящее время TS генерирует JS-код, который позволяет вызвать конструкторы классов, которые являются неправильным поведением, которое может измениться позже. – estus

ответ

1

Это должно быть

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); 
    } 
} 
Смежные вопросы