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

Question

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

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

获取以下输出

输出

Answer 1

重用此代码的最快方法是利用 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。