Question

我正试图通过https://www.meteor.com/tutorials/angular/templates的Meteor教程有一部分是我无法弄清楚的在他们的客户端/ main.js中：

<body>
<div class="container" ng-app="simple-todos">
    <todos-list></todos-list>
</div>
</body>

他们只是在中间添加了一个<todos-list>标记，并加载了该模板。我无法弄清楚todos-list如何被转换为实际模板，是否有一些名称转换约定“todos-list”被翻译为“todosList”并以此方式引用？

提前致谢

Answer 1

这是由于AngularJS执行了规范化。

<强>正常化

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：


从元素/属性的前面剥离x-和数据。

将：， - 或_分隔的名称转换为camelCase。

链接到AngularJS文档here

Answer 2

todosList是一个组件。由于html不支持大小写，因此您在标记中编写todos-list。组件可以带有与之关联的模板（html标记）。因此，当您在html中放置<todos-list></todos-list>时，angular会在那里插入html。查看组件和指令的角度文档。网上有很多例子。

Meteor Angular Tutorial：Todos List的<todos-list> </todos-list>标签

2 个答案: