在打字稿中創建指令以顯示加載進度的角度

我試圖在Typescript中創建指令，這將繼續監視掛起的$資源請求。我只需要一個指令作爲一個屬性，它將與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。我使用$資源服務來製作服務器端API請求。

來源

2016-07-06 Microsoft Developer

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

來源

2016-07-06 14:52:19

非常感謝。有效。我不能使用elements.show（）屬性而不是添加類嗎？我得到「angular.js：13550 TypeError：elements.show不是一個函數」錯誤，如果我使用elements.show（） –

@MicrosoftDeveloper檢查更新的答案，你應該使用'箭頭函數'而不是普通的javascript函數 –

在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

來源

2016-07-06 14:48:57 Ajay

在打字稿中創建指令以顯示加載進度的角度

回答

相關問題