角度加载指示器自定义元素指令答案

【问题标题】：Angular Loading Indicator Custom element Directive角度加载指示器自定义元素指令
【发布时间】：2016-04-13 17:57:15
【问题描述】：

我编写了自定义角度元素指令，它根据服务调用评估的条件显示/隐藏加载指示器。该指令作为元素应用到元素。该指令工作正常，但问题是应用元素的内容没有隐藏。

这是我的指令：

export interface ILoadingIndicatorAttr extends ng.IAttributes {
  efpLoadingIndicator: string;
}
 export interface ILoadingIndicatorscope extends ng.IScope {
   loading: boolean;
 }



export class LoadingIndicator implements ng.IDirective {
   public restrict: string = 'A';
   public replace: boolean = true;
   static $inject = ["$compile", "$templateRequest", "$timeout"];

constructor(public _compile: ng.ICompileService, private templateService: ng.ITemplateRequestService, private timeout: ng.ITimeoutService) {

};

link = (scope: ILoadingIndicatorscope, element: ng.IAugmentedJQuery, attrs: ILoadingIndicatorAttr, ngModel: ng.INgModelController): void => {
    var tempThis = this;
    var templateUrl: string = 'app/modules/common/directives/loadingIndicator/loadingIndicator.tmpl.html';
    attrs.$observe('efpLoadingIndicator', () => {
        if (attrs.efpLoadingIndicator == "true") {
            this.timeout(() => {
                if (attrs.efpLoadingIndicator == "true") {
                    scope.loading = true;
                    tempThis.resolveTemplate(templateUrl).then((html: ng.IAugmentedJQuery) => {
                        tempThis._compile(html)(scope).appendTo(element);                            
                    });
                }
                else {                      
                    scope.loading = false;
                }
            }, 1000);
        }
        else {
            scope.loading = false;
        }
    });
}

resolveTemplate = (templateUrl: string): ng.IPromise<ng.IAugmentedJQuery> => {
    return this.templateService(templateUrl).then((html: string) => {
        return angular.element(html);
    });
   }
}

这是它的应用方式：

 <div efp-loading-indicator ={{vm.isLoading}}>

  <select> </select>

 </div

我想在加载指示器出现时隐藏 div 的内容，在加载指示器关闭时显示。我知道我可以在子元素上使用 ng-show 但我不想这样做，因为我想重用这个指令。

【问题讨论】：

标签： angularjs typescript angular-directive

【解决方案1】：

问题是this 不是你在链接函数中所期望的。那时，this 将引用 window 对象（因此也是 tempThis）。

如果你需要使用link函数，你必须在构造函数中将它重新绑定到this，其中this是指类：

export interface ILoadingIndicatorAttr extends ng.IAttributes {
   efpLoadingIndicator: string;
}

export interface ILoadingIndicatorscope extends ng.IScope {
   loading: boolean;
}

export class LoadingIndicator implements ng.IDirective {
   public restrict: string = 'A';
   public replace: boolean = true;
   link:(scope: ILoadingIndicatorscope, element: ng.IAugmentedJQuery, attrs: ILoadingIndicatorAttr, ngModel: ng.INgModelController)=> void

   static $inject = ["$compile", "$templateRequest", "$timeout"];

constructor(public _compile: ng.ICompileService, private templateService: ng.ITemplateRequestService, private timeout: ng.ITimeoutService) {
    this.link = this.myLink.bind(this);
};

myLink(scope: ILoadingIndicatorscope, element: ng.IAugmentedJQuery, attrs: ILoadingIndicatorAttr, ngModel: ng.INgModelController): void => {
    var tempThis = this;
    var templateUrl: string = 'app/modules/common/directives/loadingIndicator/loadingIndicator.tmpl.html';
    attrs.$observe('efpLoadingIndicator', () => {
        if (attrs.efpLoadingIndicator == "true") {
            this.timeout(() => {
                if (attrs.efpLoadingIndicator == "true") {
                    scope.loading = true;
                    tempThis.resolveTemplate(templateUrl).then((html: ng.IAugmentedJQuery) => {
                        tempThis._compile(html)(scope).appendTo(element);                            
                    });
                }
                else {                      
                    scope.loading = false;
                }
            }, 1000);
        }
        else {
            scope.loading = false;
        }
    });
}

resolveTemplate = (templateUrl: string): ng.IPromise<ng.IAugmentedJQuery> =>{
    return this.templateService(templateUrl).then((html: string) => {
        return angular.element(html);
    });
   }
}

【讨论】：