Как заставить работать ngIf после включения?

Question

У меня есть компонент списка, где я хочу определить пользовательские столбцы внутри. Эти столбцы включаются в строку шаблона компонентов. К сожалению, я не могу использовать ngIf в этом контексте.

Вот моя функция $postLink компонента myList:

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);

Вот plnkr минимального образца: http://plnkr.co/edit/C9Rvs8NiTYsV3pwoPF6a

Это из-за terminal имущество? Может кто-нибудь просветить меня, почему ngIf не работает так, как ожидал?

Answer 1

Я думаю, пытаясь выполнить операцию в postLink этап слишком поздний, так как он сначала применяется к дочерним элементам.

Этап компиляции представляется более подходящим. Там все проще, вам даже не нужно использовать функцию включения или клонирования. Область применения применяется в более позднем состоянии.

Я предоставляю решение с использованием директивы, так как в подобных случаях синтаксис компонента кажется более запутанным.

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