在打字稿中创建指令以按角度显示加载进度 [英] Create directive in typescript to show loading progress in angular

问题描述

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

module app.common.directives {接口 IProgressbarScope 扩展 ng.IScope {值:数量；isLoading: 任何;showEl: 任何;}类 Progressbar 实现 ng.IDirective {静态 $inject = ['$http'];静态实例():ng.IDirective {返回新的进度条；}//transclude = true;限制 = 'A';替换 = 真；链接 = 函数(范围:IProgressbarScope，元素:ng.IAugmentedJQuery，属性:ng.IAttributes，$http:ng.IHttpService){调试器；scope.isLoading = 函数 () {返回 $http.pendingRequests.length >0;};scope.$watch(scope.isLoading, function (v) {调试器如果(五){element.addClass("hidediv")} 别的 {element.removeClass("hidediv");}});}}angular.module('app').directive('progressbar', Progressbar.instance);}

在Index.html中，如下使用:

 
//加载图片

但是在指令中，$http 总是未定义的.请注意，我没有直接使用 $http.我使用 $resource 服务进行服务器端 api 请求.

解决方案

$http 未定义的原因是，您试图从 获取 $http 依赖项指令的链接 函数.基本上链接函数的第四个参数代表 require 控制器.

理想情况下，您应该从 Progressbar 构造函数中获取注入的依赖项实例.

class Progressbar 实现 ng.IDirective {_http: ng.IHttpService;//定义_http变量静态 $inject = ['$http'];//这里请求依赖静态实例($http: ng.IHttpService): ng.IDirective {this._http = $http;//获取分配给`_http`的`$http`对象返回新的进度条；}//transclude = true;限制 = 'A';替换 = 真；//从这里删除依赖链接 = 函数(范围:IProgressbarScope，元素:ng.IAugmentedJQuery，属性:ng.IAttributes){//这里使用箭头函数scope.isLoading = ()=>{返回 this._http.pendingRequests.length >0;};//这里使用箭头函数scope.$watch(scope.isLoading, (v)=> {如果(五){element.addClass("hidediv")} 别的 {element.removeClass("hidediv");}});}}

I am trying to create directive in Typescript which will keep watch on pending $resource requests. I want only one directive as an attribute which will be used with div in index.html to show loading progress. Below is my code for directive.

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

in Index.html, it is used as below:

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

But in directive, $http is always undefined. Note that I am not using $http directly. I a using $resource service for making server side api requests.

解决方案

The reason $http undefined is, you are trying to get $http dependency from link function of directive. Basically 4th parameter of link function stands for require controller.

You should Ideally get that injected dependency instance from Progressbar constructor function.

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

这篇关于在打字稿中创建指令以按角度显示加载进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！