AngularJS新手求助：JSFiddle中基础表单无法运行，如何调试？

我帮你排查了你的Fiddle，发现几个新手常踩的关键问题，一步步来修复就能搞定：

1. 先确认JSFiddle的框架配置 #

先看左侧面板的JavaScript选项卡：

• 确保你选的AngularJS版本是稳定分支（比如1.8.x，别选太老的测试版）
• 把Load Type改成No wrap - in <head>或者No wrap - in <body>——要是选了其他wrap选项，你的代码会被包在匿名函数里，Angular根本找不到你的控制器！

2. 修复模块和控制器的绑定逻辑 #

你当前的代码里，控制器没有正确挂载到Angular模块上，这是核心问题之一。正确的写法应该是先定义应用模块，再把控制器绑定上去：

// 先创建我们的应用模块
var myApp = angular.module('myApp', []);

// 把控制器挂载到这个模块上
myApp.controller('myCtrl', function($scope) {
  $scope.user = {
    name: '',
    email: ''
  };
  
  $scope.submitForm = function() {
    alert('表单提交成功！用户名：' + $scope.user.name);
  };
});

3. 确保HTML指令的正确绑定 #

你的HTML里得明确告诉Angular哪个是应用根节点，哪个元素使用你的控制器：

<div ng-app="myApp" ng-controller="myCtrl">
  <form ng-submit="submitForm()">
    <label>用户名：</label>
    <input type="text" ng-model="user.name" required>
    
    <label>邮箱：</label>
    <input type="email" ng-model="user.email" required>
    
    <button type="submit">提交</button>
  </form>
</div>

注意ng-app的名字必须和你JS里定义的模块名完全一致，ng-controller也要对应控制器的名字，差一个字符都不行。

4. 实用的调试小技巧 #

• 按F12打开浏览器控制台，看看有没有红色报错——比如模块找不到、控制器未定义这类问题，控制台都会明明白白给出提示
• 可以在控制器里加一行console.log('控制器加载成功啦')，刷新页面看控制台有没有输出，确认控制器是否正常初始化
• 测试双向绑定：在输入框输点内容，然后在控制台敲angular.element(document.body).scope().user.name，要是能拿到你输入的值，说明ng-model已经生效了

按照这些步骤改完，你的表单应该就能正常提交啦！

内容的提问来源于stack exchange，提问作者code-8