AngularJS Directive (TypeScript)

Question

Я пытаюсь понять, как использовать директивы в AngularJS с помощью TypeScript. Я следил за учебником, где я следил за каждым шагом соответственно .. но я столкнулся с некоторыми проблемами. По какой-то причине он не отображает содержание моей Директивы.

Сама директива:

module Directives { 
    debugger; 
    export interface IMyScope extends ng.IScope 
    { 
     name: string; 
    } 

    export function LeftMenu(): ng.IDirective { 
     return { 
      template: '<div>{{name}}</div>', 
      scope: {}, 
      link: (scope: IMyScope) => { 
       scope.name = 'Aaron'; 
      } 
     }; 
    } 
} 

Теперь я поместил отладчик, чтобы проверить, если мой код даже работает до тех пор, пока не достигнет директивы, и да это делает. Мой хром отлаживается в том месте, где он должен.

Регистрация всех директив (хотя у меня есть только один атм):

/// <reference path="../reference.ts" /> 

angular.module('directives', []).directive(Directives) 

Моя ссылка на файл:

/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular.d.ts" /> 
/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular-route.d.ts" /> 
/// <reference path="../wwwroot/libs/dx-libs/ts/dx.all.d.ts" /> 

/// <reference path="contollers/controllers.ts" /> 
/// <reference path="directives/directives.ts" /> 
/// <reference path="app.ts" /> 

Вызов директивы, как это:

<div> 
    <left-menu></left-menu> 
</div> 

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

Заранее благодарен!

Answer 1

Вам необходимо зарегистрировать директиву с именем в качестве первого параметра. Это, как я хотел бы написать директиву в комбинации с машинописи:

export = class LeftMenu implements angular.IDirective { 
    static ID = "leftMenu"; 

    public restrict = "AE"; 
    public template = '<div>{{name}}</div>'; 
    public scope = {}; 
    public link = (scope: IMyScope) => { 
     scope.name = 'Aaron'; 
    } 

    // to show how to handle injectables 
    constructor(private somethingInjected){} 

    static factory() { 
     // to show how to handle injectables 
     var directive = (somethingInjected) => new MyDirective(somethingInjected); 
     directive.$inject = ["somethingInjected"]; 
     return directive; 
    } 
} 

и зарегистрировать его:

import leftMenu = require("LeftMenu"); 

angular.module('directives', []).directive(leftMenu.ID, leftMenu.factory()); 

Answer 2

Отладчик пожары, потому что вы на самом деле представить объект .directive (машинопись transpiles модулей в объекты по по умолчанию).

Вы можете попытаться инициализировать директиву либо непосредственно в файле declarating его:

angular 
    .module("module.a") 
    .directive("directive.a",(): angular.IDirective => 
    { 
     return { 
      restrict: "E", 
      templateUrl: "template.a.html", 
      controller: "controller.a", 
      controllerAs: "$ctrl", 
      link:() => {}, 
      bindToController: true 
     }; 
    }); 

или просто экспортируемую функцию

angular 
    .module("module.a") 
    .directive("directive.a", Directives.LeftMenu); 

Я не знаю о машинопись-модуля, в курсе версии функции .directive функции углового, которая регистрирует все директивы модуля.