如何将w3schools示例保存为AngularJs组件？

Posted 2021-04-14

我在AngularJS创建一个简单的应用程序，我正在尝试构建form steps wizard但JS没有得到应用。

我已将w3schools编辑器中的所有代码复制粘贴到component.html文件中

得到以下输出

output

答案

您可以重用此代码的最快方法是利用HTML <iframe>。假设您将所有代码从w3c站点保存到文件my_downloaded_code.html，您的iframe将如下所示

<iframe src = "path/to/file/my_downloaded_file.html" width="350px" height="600px" frameborder="0" scrolling="no"></iframe>

属性宽度，高度等当然不是强制性的，但我已经选择了它们。

更确切地说，表单在发送后会发送到action_page.php，因此您必须在适当的本地化中创建这样的文件（与my_downloaded_code.html的本地化相同）。

但是，如果你想制作一个包含该代码的AngularJS组件，那将非常简单，因为正如@Tomas评论的那样

网站上的代码w3school不是用Angularjs编写的，而是用纯JS编写的...

但它当然有可能:)。

有什么必须做的？

1. 必须将功能移动到组件控制器。
2. 控制器中的函数和变量必须在template中可见，因此我们必须将它们分配给$scope。
3. on-click必须改为ng-click
4. <style>标签的内容必须移动到.css文件
5. 您必须创建action_page.php

我为你制作了plunker这样的工作组件。