在作用域中未定义简单的AngularJS形式

Question

我开始在jsfiddle中使用AngularJS表单，并且已经遇到了一个非常简单的表单示例无法按预期工作的问题。我所拥有的只是一个命名表单，由于某种原因，它没有在范围内显示（我期望有一个FormController实例）。

我设置了小提琴，下面是基本代码：

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input name="submit" type="submit" />
    </form>
</div>

JS

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    console.log($scope.theForm); //displays 'undefined'
}]);

我在jsfiddle上找不到很多简单的例子，所以我不确定这是否可能与类似的网站发生奇怪的交互（我发现的大多数例子都没有使用正式的控制器）。我也尝试在Plunker上进行检查，但是遇到相同的问题。

我确定我遗漏了一些非常明显的东西，但是在这里看不到其他许多要更改或调整的东西。任何帮助是极大的赞赏！

Answer 1

形式仅与自身注册$scope在控制器的 后
控制器已经最初运行。因此，console.log($scope.theForm)即使一切都正确设置，也会返回undefined。

在示例中，对的存在做出反应theForm，您可以设置观察器theForm以根据其存在来设置调试文本：

$scope.$watch('theForm', function(theForm) {
    if(theForm) { 
        $scope.formDebugText = 'Form in Scope';
    }
    else {
        $scope.formDebugText = 'Form is Undefined';
    }        
});

可以在http://jsfiddle.net/9k2Jk/1/上看到