如何在翻译后使ngIf工作？

Question

我有一个列表组件,我想在里面定义自定义列.这些列将被转换为组件模板的行.不幸的是,我不能在这种情况下使用ngIf.

这是我的myList组件的$ postLink函数:

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