使用打字稿定义角度指令的最简单方法和示例答案

【问题标题】：Simplest way and example to define angular directive using typescript使用打字稿定义角度指令的最简单方法和示例
【发布时间】：2017-06-06 07:03:34
【问题描述】：

我正在尝试使用打字稿学习角度。我被卡住的地方是，试图使用打字稿定义一个角度指令。我知道如何只使用角度来实现，即 angular.directive("xyz", function()....)。但我无法使用打字稿类来定义它。我在 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() 定义它。

提前谢谢你。

【问题讨论】：

标签： javascript angularjs typescript

【解决方案1】：

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

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());
}

【讨论】：