forms - 简单的 AngularJS 表单在范围内未定义

Question

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

我有一个fiddle设置完毕，下面是基本代码:

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 上找不到很多简单的例子，所以我不确定这是否可能是与类似网站的一些奇怪的交互(我发现的大多数例子都没有使用正式的 Controller )。我也尝试过用 Plunker 来检查，但遇到了同样的问题。

我确信我错过了一些非常明显的东西，但我看不到这里还有很多其他需要改变或调整的东西。非常感谢任何帮助!

Answer 1

在不使用 watch 的情况下执行此操作的一个好方法(这有点过分了)是在您将注册表单的范围内定义一个对象。

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="form.theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input type="button" value="Here the scope" ng-click="display()"/>
        <input name="submit" type="submit" />
    </form>
</div>

JS

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

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