在打字稿创建指令显示在角加载进度(Create directive in typescript to

我试图创建打字稿指令，它会继续监视未决$资源请求。 我想只有一个指令，因为这将与格index.html中可用于显示加载进度的属性。 下面是我对指令代码。

module app.common.directives {

interface IProgressbarScope extends ng.IScope {
    value: number;
    isLoading: any;
    showEl: any;
}

class Progressbar implements ng.IDirective {

    static $inject = ['$http'];
    static instance(): ng.IDirective {
        return new Progressbar;
    }
    //transclude = true;
    restrict = 'A';
    replace = true;

    link = function (scope: IProgressbarScope, elements: ng.IAugmentedJQuery, attrs: ng.IAttributes, $http: ng.IHttpService) {

        debugger;
        scope.isLoading = function () {
            return $http.pendingRequests.length > 0;
        };
        scope.$watch(scope.isLoading, function (v) {
            debugger
           if (v) {
                elements.addClass("hidediv")
            } else {
                elements.removeClass("hidediv");
            }
        });
    }
}

angular.module('app')
    .directive('progressbar', Progressbar.instance);
}

index.html中，它被用作以下：

 <div progressbar id="myProcess" name="myProcess">
     // loading image
 </div>

但是在指令，$ HTTP永远是不确定的。 请注意，我并没有直接使用$ HTTP。 我制作服务器端API请求使用$资源服务。

Answer 1:

究其原因$http不确定的是，你正在试图获得$http从依赖link指令功能。 基本上链接功能的第四个参数表示require控制器。

理论上，应该得到从依赖注入例如Progressbar构造函数。

class Progressbar implements ng.IDirective {
    _http: ng.IHttpService; //defined _http variable
    static $inject = ['$http'];
    //asking for dependency here
    static instance($http: ng.IHttpService): ng.IDirective {
        this._http = $http; //get `$http` object assigned to `_http`
        return new Progressbar;
    }
    //transclude = true;
    restrict = 'A';
    replace = true;

    //removed dependency from here
    link = function (scope: IProgressbarScope, elements: ng.IAugmentedJQuery, attrs: ng.IAttributes) { 

        //use arrow function here
        scope.isLoading = ()=> {
            return this._http.pendingRequests.length > 0;
        };
        //use arrow function here
        scope.$watch(scope.isLoading, (v)=> {
           if (v) {
                elements.addClass("hidediv")
            } else {
                elements.removeClass("hidediv");
            }
        });
    }
}

Answer 2:

定义$ scope.isLoading内directiveController，并从服务层$ HTTP调用。

基本controller.ts

export class sampleController {

    // inject service here  
    constructor() {

    }

    public isLoading() {
        callServiceFunction();
    }
}

sampleController.$inject['service'];

导入该控制器自定义指令内。

SampleService.ts

export class sampleService {
  constructor() {


  }

}
sampleService.$inject = ['$http'];

注册应用程序模块内部此服务。

欲了解更多信息请参考样本导入和导出实例和大规模的应用基础架构

文章来源: Create directive in typescript to show loading progress in angular