指示文をタイプスクリプトで作成し、ロード進捗状況を表示します。

Question

保留中の$リソース要求を監視し続けるTypescriptでディレクティブを作成しようとしています。ロードの進捗状況を示すためにindex.html内のdivで使用される属性として1つのディレクティブのみを使用します。以下は私のコードのディレクティブです。 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); 
} 

、それは以下のように使用されます。

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

しかしディレクティブで、$ HTTPは常に定義されていません。 $ httpを直接使用していないことに注意してください。私はサーバー側のapi要求を行うために$ resourceサービスを使用しています。

Answer 1

、あなたはディレクティブのlink関数から$http依存関係を取得しようとしているされ、未定義の$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"); 
      } 
     }); 
    } 
} 

Answer 2

は、directiveController内で$ scope.isLoadingを定義し、サービス層から$ 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']; 

アプリモジュール内にこのサービスを登録します。

詳細情報についてはsample Importing and exporting exampleとlarge scale app architecture