Директива машинописного текста AngularJS

Предполагая, что вы регистрируете их как:

import mod = require('yourfile')
youmodule.directive('directiveA',mod.directiveA);
youmodule.directive('directiveB',mod.directiveB);

Это должно работать, пока ваш html выглядит так:

<div directiveA>
  <div directiveB>
  </div>
</div>

Пара замечаний помимо этого:

Используйте функции для определения директив.

Это связано с тем, что директивы (в отличие от контроллеров) вызываются без оператора new. Итак, если у вас есть что-то вроде:

class Test{
    foo = "EAC";
    constructor(){
        var directive:any = {}; 
        directive.restrict = this.foo;
    }
} 

Он компилируется в неверный javascript. Поскольку функция Test вызывается без оператора new, это означает, что this относится к window, а не к экземпляру класса. Таким образом, вы все равно не можете использовать что-либо, определенное вне конструктора. Я рекомендую что-то вроде:

function foo():ng.IDirective{
    return {
        restrict: 'EAC';    
    }
}

Таким образом машинописный текст поможет вам написать правильный javascript для angular, а не укажет вам неверный путь. Когда-нибудь я сниму об этом видео

Используйте классы для вашего контроллера. Контроллеры внутри директив также вызываются с помощью оператора new. То же, что и контроллеры снаружи: http://www.youtube.com/watch?v=WdtVn_8K17E Снова пусть поможет машинописный текст. вы со значением this внутри определения контроллера. Кроме того, вы можете использовать type для контроллера в дочерней директиве примерно так (для безопасности типов и вывода):

link: function (scope, iElement, iAttrs, simplrEditable:YourControllerClass)

Для внедрения в директивные функции я все еще использую $inject. У меня есть следующее определение интерфейса:

interface Function{
    $inject:string[]
}

Это означает, что вы можете сделать:

foo.$inject = ['$compile']; // e.g

Проблема связана не с Typescript, а с директивами AngularJS. Изменение templateUrl на template и использование встроенного кода помогает устранить ошибки. Это проблема AngularJS, подробнее об этом: https://github.com/angular/angular.js/issues/1903 Надеюсь, они исправят это в будущем!

export class directiveA {
    public static $inject: Array<string> = [];
    constructor() {
        var directive: ng.IDirective = {};
        directive.priority = 0; 
        directive.restrict = "A";
        directive.scope = {};
        directive.transclude = true;
        directive.template = "<div>Your content</div>";
        directive.replace = true;
        directive.controller = function ($scope, $element) {
            this.flip = function () {
               //Some func
             }
        }
        directive.replace = true;

        return directive;
    }
} 

С моим решением вы можете использовать класс TS и не беспокоиться о фабрике и повторять то, что вам нужно ввести.

module YourApp.Common.Directives {

    class SearchInputController {
        public query: string;

        constructor(private $location: ng.ILocationService) {
        }

        doSearch(): void {
            this.$location.url(`/search?q=${this.query}`);
            this.query = '';
        }
    }

    export function SearchInputDirective($location: ng.ILocationService): ng.IDirective {
        return {
            restrict: 'E',
            templateUrl: 'common/directives/searchInput/SearchInputDirective.html',
            replace: true,
            scope: true,
            controllerAs: 'SearchInputController',
            bindToController: {
                'query': '@'
            },
            controller: (): any => new SearchInputController($location)
        };
    }

    SearchInputDirective.$inject = ['$location'];
}

Зарегистрироваться:

angular.module('common', [])
    .directive('searchInput', YourApp.Common.Directives.SearchInputDirective);

И HTML, чтобы увидеть всю картинку (templateUrl):

<form ng-submit="SearchInputController.doSearch()">
    <input type="search" ng-model="SearchInputController.query">
</form>

простой способ написать директиву в ts, я думаю, может работать и с вложенной директивой

class D{
    static foo(){
        return {
                restrict:'A',
                template:'<div>Here I am to save the day</div>',
                replace: true
            }
    }
}


/// <reference path="./angular.d.ts"/>
/// <reference path="./directive.ts"/>
class MyApp{
    public app:AngularModule;
    constructor(){
          this.app = angular.module('myApp', []);
          this.app.directive ('superman',() => {
                return D.foo();
            } 
          );
    }
}
new MyApp();

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Directive</title>
    </head>
    <body>
        <div data-ng-app="myApp">
            <div data-superman></div>  
        </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

    <script src="./directive.js"></script>
    <script src="./appDirective.js"></script>

    </body>
</html>