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

Question

我正在AngularJS创建一个简单的应用程序，并且正在尝试构建表单步骤向导，但未应用JS。

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

得到以下输出

产量

Answer 1

重用此代码的最快方法是利用HTML <iframe>优势。 假设您将所有代码从w3c网站保存到了my_downloaded_code.html文件中， 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与你这样的工作的组成部分。