λ¬Έμμ μκΈ° λλ¬Έμ μ§μλ¬Έμμ μ¬μ©νλ κ²μ΄ μ½κ° μ‘°μ¬μ€λ½μ΅λλ€.
κ·Έλ¬λ μ΄λ€ κ²½μ°μλ λ€μ€ νΈλμ€ν΄λ£¨μ μ μνν μ μκΈ°λ₯Ό μνκΈ° λλ¬Έμ μ¬μ©ν νμκ° μμ΅λλ€.
κ·Έλμ κ±°κΈ° μμ΅λλ€ ; λ―Έλμ λ΄ μ§μλ¬Έμ΄ κΉ¨μ§λ κ²μ λλ €μνμ§ μκ³ μμ νκ² μ¬μ©ν μ μμ΅λκΉ?
μ΄ APIμ μμ‘΄νμ§ λ§μμμ€. $$
λ λΉκ³΅κ°μ΄λ©° ν₯ν 릴리μ€μμ μ€λ¨λ μ μμμ μλ―Έν©λλ€.
λ―Έλμ λμΌν μμμ λν΄ λ€μ€ νΈλμ€ν΄λ£¨μ μ νμ©νλ μ΅μ
μ΄ μμ΅λκΉ?
μ΄κ²μ΄ μ μ©ν μ μλ λ§μ μμμ λ³Ό μ μμ΅λλ€. μ€μ λ‘ λ΄ μ§μλ¬Έ μ€ μΌλΆμ λ§€μ° μ€μν©λλ€. μ¬κΈ°μμ DOMμ μ¬μ©νκ³ μ»΄νμΌ κΈ°λ₯μμ $compile(κΉ¨λν λλμ΄ λ€μ§ μμ)
μ¬μ©μ μ§μ μ§μλ¬Έμμ ngIf μ€νμΌ λμμ ꡬνν μ μλ€λ©΄ νμ€ν λμμ΄ λ κ²μ λλ€. μ°λ¦¬λ μ§μμ μΌλ‘ μλΉμ€λ₯Ό μ£Όμ νκ³ μμ λ λλ§ λͺ©μ μΌλ‘λ§ μ»¨νΈλ‘€λ¬ μμ±μ λ§λ€ νμκ° μλλ‘ μ΄λ¬ν μ§μλ¬Έμ λ§λλλ€.
ngIfμ λμΌνκ² μλνλλ‘ λ΄λΆ μ§μλ¬Έ μμ±μ μμ‘΄νμ§ μλ κ²μ΄ μ’μ΅λλ€.
μλ₯Ό λ€μ΄:
import {SubscriptionService, ISubscription} from '../subscriptions/subscriptions.service';
interface IPBIfFeatureDirectiveScope extends ng.IScope {
isRenderElement: boolean;
}
interface IPBIfFeatureDirectiveAttributes extends ng.IAttributes {
pbIfFeature: string;
ngIf: string;
}
class IfFeatureDirective implements ng.IDirective {
public transclude: any;
public priority: number;
public terminal: boolean;
public restrict: string;
public scope = true;
public link: ng.IDirectiveLinkFn;
public $$tlb: boolean;
constructor(ngIfDirectiveArr: ng.IDirective[],
subscriptionService: SubscriptionService,
$parse: ng.IParseService) {
let ngIfDirective: any = ngIfDirectiveArr[0];
this.transclude = ngIfDirective.transclude;
this.priority = ngIfDirective.priority - 1;
this.terminal = ngIfDirective.terminal;
this.restrict = ngIfDirective.restrict;
this.$$tlb = true;
this.link = function (scope: IPBIfFeatureDirectiveScope,
element: ng.IAugmentedJQuery,
attr: IPBIfFeatureDirectiveAttributes) {
let expression: string = attr.pbIfFeature;
let argArray: IArguments = arguments;
let executeDirective = (): void => {
subscriptionService.getSubscription().$promise
.then((subscription: ISubscription) => {
scope.isRenderElement = $parse(expression)(subscription.features);
attr.ngIf = 'isRenderElement';
ngIfDirective.link.apply(null, argArray);
});
};
executeDirective();
};
}
}
export const ifFeatureDirectiveFactory = (ngIfDirective: ng.IDirective[],
subscriptionService: SubscriptionService,
$parse: ng.IParseService): ng.IDirective => new IfFeatureDirective(ngIfDirective, subscriptionService, $parse);
ifFeatureDirectiveFactory.$inject = ['ngIfDirective', 'subscriptionService', '$parse'];
κ°μ₯ μ μ©ν λκΈ
λ―Έλμ λμΌν μμμ λν΄ λ€μ€ νΈλμ€ν΄λ£¨μ μ νμ©νλ μ΅μ μ΄ μμ΅λκΉ?
μ΄κ²μ΄ μ μ©ν μ μλ λ§μ μμμ λ³Ό μ μμ΅λλ€. μ€μ λ‘ λ΄ μ§μλ¬Έ μ€ μΌλΆμ λ§€μ° μ€μν©λλ€. μ¬κΈ°μμ DOMμ μ¬μ©νκ³ μ»΄νμΌ κΈ°λ₯μμ $compile(κΉ¨λν λλμ΄ λ€μ§ μμ)