angularjs component using ng-transclude(ng-transclude属于directive，将其改成component形式)

最新推荐文章于 2021-03-03 21:36:35 发布

小明不知上班的路

最新推荐文章于 2021-03-03 21:36:35 发布

阅读量411

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/u011187194/article/details/96148407

版权

学习专栏收录该内容

40 篇文章 0 订阅

订阅专栏

因为框架原因，便于统一管理和修改，我们在定义框架时，统一使用angularjs + ts。

在公共组件部分，统一使用component而不使用directive（仅仅只是因为便于管理和统一化）

因为需求原因，需要使用到 transclude（此属性需要在angularjs1.5之后才能使用）属性，用于公共组件化，在使用时，只需要替换掉指定部分，保留统一格式部分（比如：统一的样式，统一的格式，甚至是统一的格式），这样可以保证开发人员只需要关心自己替换的那部分，其他内容不需要管

在使用时，我一直出现一个错误：Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found

针对这个问题，我还专门脱离了项目，写了一个测试页面，一下是代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<my-component>

<my-component-tdd>test2</my-component-tdd>

<my-component-dtt>Test1</my-component-dtt>

</my-component>

</div>

angular

.module('app', [])

.component('myComponent', {

template: '<div>' +

'<h1>22My Component</h1>' +

'<div ng-transclude="dtt"></div>' +

'<div ng-transclude="tdd"></div>' +

'</div>',

transclude: { 'dtt':'myComponentDtt',

'tdd':'myComponentTdd'}

});

</script>

</body>

</html>

是可以成功执行的，他会替换掉我需要替换的dtt和tdd部分，并且保留h1标签，

在这里，完全没有问题。但是我通过这种写法，写到框架中，就会出现上面的问题：Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found。这一度让我崩溃。我查询了一些资料：https://stackoverflow.com/questions/20718127/illegal-use-of-ngtransclude-directive-in-the-template

得到的结论大概是：因为页面渲染的顺序而导致transclude失效。最后，在高手的指引下，调试angularjs源码。得到结论：

根本原因，只是因为：$transclude = undefined。ok，终于找到问题。

然后我的写法：

根本原因在于，我用了 “冒号”而不是等号。但是为什么我上面贴出来，用“冒号”又可以呢。原因是，上面提供的代码，使用的是js，而我自己的项目，使用的是TS，只需要将“冒号”修改为“=”就可以成功（因为在TS中，冒号代表的是声明，而不是赋值）。

仅作自己学习的笔记，如有错误的地方，请指正，亦或有什么问题，请留言

小明不知上班的路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs component using ng-transclude(ng-transclude属于directive，将其改成component形式)

因为框架原因，便于统一管理和修改，我们在定义框架时，统一使用angularjs + ts。在公共组件部分，统一使用component而不使用directive（仅仅只是因为便于管理和统一化）因为需求原因，需要使用到 transclude（此属性需要在angularjs1.5之后才能使用）属性，用于公共组件化，在使用时，只需要替换掉指定部分，保留统一格式部分（比如：统一的样式，统一的格式，...
复制链接

扫一扫