How to make ngIf work after transclusion?

Question

I have a list component where I want to define custom columns inside. These columns get transcluded into the row of the components template. Unfortunately I can't use ngIf in this context.

Here is my $postLink function of the myList component:

const template = $templateCache.get('myList.tpl.html');
const jqTemplate = angular.element(template);
const row = angular.element(jqTemplate.children()[0]);

$transclude(clone => {
  row.append(clone);
  $element.html(jqTemplate.html());
});

$compile($element.contents())($scope);

Here is a plnkr of the minimal sample: http://plnkr.co/edit/C9Rvs8NiTYsV3pwoPF6a

Is that because of the terminal property? Can someone entlighten me why ngIf does not work like expect it to?

Answer 1

I think trying to perform the operation in postLink phase is too late, since it is first being applied to child elements.

Compile phase seems to be more appropriate. In there things are simpler, you don't even need to use transclusion or clone-linking function. Scope is applied at a later state.

I provide a solution using directive since in cases like this I find component syntax more confusing.

app.directive('myList', function($templateCache){
    return {
        bindings: {
          list: '='
        },
        transclude: false,
        compile: function(tElement) {
            const template = $templateCache.get('myList.tpl.html');
            const jqTemplate = angular.element(template);
            var elemChildren = tElement.children('div');
            jqTemplate.children('.row').append(elemChildren);
            tElement.append(jqTemplate);
          return {};
        }

    }

});

http://plnkr.co/edit/MrLJmnMKxO8PVPkzE8KK?p=preview