Question

我正在尝试使用打字稿学习角度。我被困的地方是，尝试使用typescript定义一个角度指令。我知道如何使用角度来实现，即angular.directive（＆＃34; xyz＆＃34;，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类一起使用，则需要为类的返回实例实现一个函数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());
}

使用typescript

1 个答案: