Angular.js: Is $$tlb going to stay/official ?

Created on 29 Jan 2014  ·  3Comments  ·  Source: angular/angular.js

Since it is not in the docs, I am a little wary of using it in my directives.

I am however in the need of using it, since I would like to be able to do multiple transclusion in some cases.

So there it is ; can I safely use it without fear of seeing my directives get broken in the future ?

Most helpful comment

Will there be some kind of option to allow multiple transclusion on the same element in the future ?
I can see many areas where this would be useful - it's actually pretty important to some of my directives, where I've been reduced to fiddle with the DOM and $compile in the compile function (which does not feel clean tbh)

All 3 comments

Please do not rely on this API. $$ means that it's private and we may break it in a future release.

Will there be some kind of option to allow multiple transclusion on the same element in the future ?
I can see many areas where this would be useful - it's actually pretty important to some of my directives, where I've been reduced to fiddle with the DOM and $compile in the compile function (which does not feel clean tbh)

It definitely would be helpful to be able to implement ngIf style behavior in custom directives. We create such directives so that we are not constantly having to inject services and create controller properties solely for the purpose of element rendering.

I would definitely prefer not having to rely on an internal directive property to make it work the same as ngIf.

For example:

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'];
Was this page helpful?
0 / 5 - 0 ratings