Angular.js: $$tlbλŠ” μœ μ§€/κ³΅μ‹μ μœΌλ‘œ μœ μ§€λ©λ‹ˆκΉŒ?

에 λ§Œλ“  2014λ…„ 01μ›” 29일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: angular/angular.js

λ¬Έμ„œμ— μ—†κΈ° λ•Œλ¬Έμ— μ§€μ‹œλ¬Έμ—μ„œ μ‚¬μš©ν•˜λŠ” 것이 μ•½κ°„ μ‘°μ‹¬μŠ€λŸ½μŠ΅λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ μ–΄λ–€ κ²½μš°μ—λŠ” 닀쀑 νŠΈλžœμŠ€ν΄λ£¨μ „μ„ μˆ˜ν–‰ν•  수 있기λ₯Ό μ›ν•˜κΈ° λ•Œλ¬Έμ— μ‚¬μš©ν•  ν•„μš”κ°€ μžˆμŠ΅λ‹ˆλ‹€.

κ·Έλž˜μ„œ κ±°κΈ° μžˆμŠ΅λ‹ˆλ‹€ ; λ―Έλž˜μ— λ‚΄ μ§€μ‹œλ¬Έμ΄ κΉ¨μ§€λŠ” 것을 λ‘λ €μ›Œν•˜μ§€ μ•Šκ³  μ•ˆμ „ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ―Έλž˜μ— λ™μΌν•œ μš”μ†Œμ— λŒ€ν•΄ 닀쀑 νŠΈλžœμŠ€ν΄λ£¨μ „μ„ ν—ˆμš©ν•˜λŠ” μ˜΅μ…˜μ΄ μžˆμŠ΅λ‹ˆκΉŒ?
이것이 μœ μš©ν•  수 μžˆλŠ” λ§Žμ€ μ˜μ—­μ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ λ‚΄ μ§€μ‹œλ¬Έ 쀑 일뢀에 맀우 μ€‘μš”ν•©λ‹ˆλ‹€. μ—¬κΈ°μ—μ„œ DOM을 μ‚¬μš©ν•˜κ³  컴파일 κΈ°λŠ₯μ—μ„œ $compile(κΉ¨λ—ν•œ λŠλ‚Œμ΄ 듀지 μ•ŠμŒ)

λͺ¨λ“  3 λŒ“κΈ€

이 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'];
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰