angularjs – 如何在翻译后使ngIf工作?
发布时间:2020-12-17 07:23:24 所属栏目:安全 来源:网络整理
导读:我有一个列表组件,我想在里面定义自定义列.这些列将被转换为组件模板的行.不幸的是,我不能在这种情况下使用ngIf. 这是我的myList组件的$postLink函数: const template = $templateCache.get('myList.tpl.html');const jqTemplate = angular.element(templat
我有一个列表组件,我想在里面定义自定义列.这些列将被转换为组件模板的行.不幸的是,我不能在这种情况下使用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 那是因为终端属性吗?有人可以告诉我为什么ngIf不能像预期的那样工作吗?
我认为尝试在postLink阶段执行操作为时已晚,因为它首先应用于子元素.
编译阶段似乎更合适.在那里事情更简单,你甚至不需要使用transclusion或clone-linking功能.范围适用于以后的状态. 我提供了一个使用指令的解决方案,因为在这种情况下我发现组件语法更加混乱. 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |