Optimize AngularJS 1.5.7 directive on TypeScript – …args not working and 2 classes are encapsulated

I’m developing on a old project which was developed with AngularJS 1.5.7. And I want to use TypeScript for new developed things. So only new added things should be in TypeScript – no full migration at the moment.

I was able to find out how to write a directive with TypeScript on AngularJS.

import * as angular from 'angular';

angular
    .module('starter.directives')
    .directive('lateralScrollbar', ['$timeout', ($timeout) =>
        new (class {
            restrict = 'A';

            constructor(
                private $timeout
            ) { }

            link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) {
                let directive = this;

                new (class {
                    constructor(
                        scope: ng.IScope,
                        element: ng.IAugmentedJQuery,
                        attrs: ng.IAttributes
                    ) {
                        scope.something = 'Loading';
                        /** 1. How to optimize hat "directive" is not needed here? Maybe that I can use "this" instead or "parent" */
                        directive.$timeout(() => scope.something = 'OK', 1000);
                    }
                })(scope, element, attrs);
            }
            /** 2. How to optimize that I can pass the arguments with that the function was called. For example fn.apply(); and ...args? */
        })($timeout)
    ]);

You can see that there are 2 comments.

1. How to optimize hat “directive” is not needed here? Maybe that I can use “this” instead or “parent”
2. How to optimize that I can pass the arguments with that the function was called. For example fn.apply(); and …args?

So the first one is interesting. I think. Currently I call the directive as normal as possible with an array of dependencies and the function at the end.
But there its unnecessary complex
This function creates an object of the class in it. And then this class have an link function which defines the directive as this so that I can use the passed arguments in it. (i.e. $timeout).

And the second thing is that I define the $timeout variable four times at the moment. 1 x on dependencies of angular directive. 1 x constructor of class. 1 x argument for first class initialization. 1 x in function which is the wrapper of first class.

So this was one try of my but it fails because it can’t handle this ...args thing. Don’t know how to optimize.

import * as angular from 'angular';

angular
    .module('starter.directives')
    .directive('lateralScrollbar', ['$timeout', (...args) =>
        new (class {
            restrict = 'A';

            constructor(
                private $timeout
            ) { }

            link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) {
                let directive = this;

                new (class {
                    constructor(
                        scope: ng.IScope,
                        element: ng.IAugmentedJQuery,
                        attrs: ng.IAttributes
                    ) {
                        scope.something = 'Loading';
                        /** 1. How to optimize hat "directive" is not needed here? Maybe that I can use "this" instead or "parent" */
                        directive.$timeout(() => scope.something = 'OK', 1000);
                    }
                })(scope, element, attrs);
            }
            /** 2. How to optimize that I can pass the arguments with that the function was called. For example fn.apply(); and ...args? */
        })(args)
    ]);

Error: TS2554: Expected 1 arguments, but got 0.

Maybe someone can help me Thank’s in Advance!

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/11/optimize-angularjs-1-5-7-directive-on-typescript-args-not-working-and-2-classes-are-encapsulated/
via @lzomedia #developer #freelance #web #lzomedia.com