Implementing a Typescript directive in AngularJS to create a class

Question

Implementing a Typescript directive in AngularJS to create a class

After using AngularJS for quite some time, I decided to explore Typescript. I managed to convert most of my Angular code to Typescript and found it beneficial, especially when working with services. However, I am struggling to convert the following directive to a Typescript class. It functions perfectly fine as AngularCode, but I'm looking for ways to make it work in Typescript.

angular.module('myValidation', [])
    .directive('myValidation', function() {
        return {
            restrict: 'A',
            require: "ngModel",
            link: function(scope, elm, attrs, ctrl) {
                switch (attrs.myValidation) {
                    case 'email':
                        var regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
                        break;
                }
                ctrl.$parsers.unshift(function(viewValue) {
                    if (regex.test(viewValue)) {
                        ctrl.$setValidity('myValidation', true);
                    }
                    else {
                        ctrl.$setValidity('myValidation', false);
                    }
                    return viewValue;
                });
                ctrl.$formatters.unshift(function(viewValue) {
                    if (regex.test(viewValue)) {
                        ctrl.$setValidity('myValidation', true);
                    }
                    else {
                        ctrl.$setValidity('myValidation', false);
                    }
                    return viewValue;
                });
            }
        };
    });

angularjs typescript

Answer 1

Answer №1

https://github.com/uniqueurl-to-learn-more

@directive(app)
export default class CopyText implements IDirective {
    angularModule = app;
restrict = "E";

scope: any = {
    model: "="
};

templateUrl = "UniqueTemplates/Directives/copyText.html";

link: (scope: any, elm: any) => void = (scope, elm: any) => {
    var input: JQuery;

    scope.select = ($event) => {
        input = $($event.target).next().first();
    };
    scope.copy = () => {
        input.on("focus", function() {
            this.setSelectionRange(0, this.value.length);
        });

        input.focus();
    };
};

}

Answer 2

https://github.com/uniqueurl-to-learn-more

@directive(app)
export default class CopyText implements IDirective {
    angularModule = app;
restrict = "E";

scope: any = {
    model: "="
};

templateUrl = "UniqueTemplates/Directives/copyText.html";

link: (scope: any, elm: any) => void = (scope, elm: any) => {
    var input: JQuery;

    scope.select = ($event) => {
        input = $($event.target).next().first();
    };
    scope.copy = () => {
        input.on("focus", function() {
            this.setSelectionRange(0, this.value.length);
        });

        input.focus();
    };
};

}

Answer 3

Answer №2

In order to use a directive with an AngularJS TypeScript class, you must create a Factory function that will return an instance of your class. Here's an example:

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

Answer 4

In order to use a directive with an AngularJS TypeScript class, you must create a Factory function that will return an instance of your class. Here's an example:

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

Implementing a Typescript directive in AngularJS to create a class

Answer №1

Answer №2

Similar questions

Traversing through nested states in ui-router without refreshing the parent state

Attempting to compile TypeScript by referencing ng2-bootstrap using Gulp within Visual Studio

What kind of null/undefined is being assumed?

Can a ng-repeat value be assigned to a text input field?

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

PrimeNG Component Containing a Dynamic Dialog Instance

Hover shows no response

Setting Angular FormControl value to null within a service

Issue with CORS when starting SAM local API

Modifying Characteristics of Elements Added Dynamically

Issue navigating with Angular routes

Angular JS integration for optimal Bootstrap grid alignment

Prevent duplicate components from interacting with one another in Angular

Query and display comments on posts using AngularJS and ng-repeat from a restful Api with model relations

HTML page not being displayed in the AngularJS $routeProvider within the <div ng-view> tag

Using TypeScript to create a unique object type that is mapped with generics for each key

What is the process for importing string data into an Excel document using Angular?

What is the best way to access and interpret a JSON file within an Angular application?

Version 4.0 of d3 introduces an import statement that provides a __moduleExports wrapper

Display content exclusively in PDF format