我有一个列表组件,我想在里面定义自定义列。这些列将被转换为组件模板的行。不幸的是,我不能在这种情况下使用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不像预期的那样工作吗?
答案 0 :(得分:0)
我认为尝试在postLink
阶段执行操作为时已晚,因为它首先应用于子元素。
编译阶段似乎更合适。在那里事情更简单,你甚至不需要使用transclusion或克隆链接功能。范围适用于以后的状态。
我提供了一个使用指令的解决方案,因为在这种情况下我发现组件语法更加混乱。
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 {};
}
}
});