在打字稿中创建指令以显示角度加载进度

Posted 2023-03-13

【中文标题】在打字稿中创建指令以显示角度加载进度

【英文标题】：Create directive in typescript to show loading progress in angular

【发布时间】：2016-11-08 15:45:00

【问题描述】：

我正在尝试在 Typescript 中创建指令，该指令将密切关注未决的 $resource 请求。我只想要一个指令作为属性，它将与 index.html 中的 div 一起使用以显示加载进度。下面是我的指令代码。

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。我使用 $resource 服务来发出服务器端 api 请求。

【参考方案1】：

在directiveController 中定义$scope.isLoading 并从服务层调用$http。

基本控制器.ts

export class sampleController 

    // inject service here  
    constructor() 

    

    public isLoading() 
        callServiceFunction();
    


sampleController.$inject['service'];

在自定义指令中导入这个控制器。

SampleService.ts

export class sampleService 
  constructor() 


  


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

在应用模块中注册此服务。

更多信息请参考sample Importing and exporting example 和large scale app architecture

【参考方案2】：

$http 未定义的原因是，您试图从指令的link 函数中获取$http 依赖项。基本上链接函数的第 4 个参数代表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");
            
        );
    

【讨论】：

非常感谢。有效。我不能使用 elements.show() 属性而不是添加类吗？如果我使用 elements.show()

，我会收到“angular.js:13550 TypeError: elements.show is not a function”错误

@MicrosoftDeveloper 检查更新的答案，您应该使用 Arrow function 而不是普通的 javascript 函数