javascript - 使用 typescript 定义 Angular Directive(指令)的最简单方法和示例

Question

我正在尝试使用 typescript 学习 Angular 。我陷入困境的是，尝试使用 typescript 定义 Angular Directive(指令)。我知道如何仅使用 Angular 来实现，即 angular.directive("xyz", function()....)。但我无法使用 typescript 类来定义它。我在 stackoverflow 上查找了一些示例来执行此操作，但代码太复杂，我无法理解，而且它们是特定于任务的。我有一些代码，例如:

module MyDirectives {
    var app = ClassProject.getModule();

    class MyName{
        public restrict: string = 'E';
        public scope = {
            name: '@',
            age: '='
        };

        public template: string = '<div>{{ name }} : {{ age }}</div>';


        static factory():any {
            const direct: any = new MyName();
            return direct;
        }
    }
    app.directive("myName", MyName.factory());
}

我的 html 是

<div>
<my-name name="loki" age="age"></my-name>
</div>

(年龄是范围变量)但我遇到了错误，并且 html 页面上没有显示任何输出。

我找到了一种解决方法，将变量定义为函数，即

module MyDirectives {
    var app = ClassProject.getModule();

    export function myname(): ng.IDirective {
        return {
            restrict:'E',
            scope: {
                name: '@',
                age: '='
            },
            template: '<div>{{ name }} : {{ age }}</div>',
        }
    }

    app.directive('myName', myname);
}

第二个示例有效(使用了函数)，但我无法使用该类让它正确执行。

另外，请您告诉我是否可以使用函数来实现该指令，或者什么都不用，只需在 typescript 项目中使用 angular.directive() 来定义它。

提前谢谢您。

Answer 1

指令 angularjs 需要一个函数。如果你想在 typescript 类中使用指令，你需要实现一个函数工厂来返回类的实例。看这个例子:

Module Directive{
 class myDirectiveCtrl {

        private name: string;
        private items: Array<string>;
        private $q: ng.IQService;
        static $inject = ['$scope','$window','$q'];

        constructor($scope: ImyDirectiveScope, $window) {
            this.name = $scope.name;
            this.items = ['salut', 'hello', 'hi', 'good morning'];
        }

        clickMe = ():void => {
            console.log('dssff');
            this.items.push('yo');
        }

    }
    export interface ImyDirectiveScope {
        name: string
    }

        export class myDirective implements ng.IDirective {
                 restrict = 'E';
                 template = '<div><h1>{{vm.name}}</h1><div ng-repeat="i track by $index in vm.items">{{i}}</div><hr/><button type="button" ng-click="vm.clickMe()">Click Me</button></div>';
                 replace = true;
                 scope = {
                     name: '@'
                 };
                 controller = myDirectiveCtrl;
                 controllerAs = 'vm';

                 link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: myDirectiveCtrl) => {

                 };

                 constructor() { };
                 static factory(): ng.IDirectiveFactory {
                     var directive = () => new myDirective();
                     return directive;
                 }

             }

    app.directive('myDirective',Directive.myDirective.factory());
}