形式 – 简单的AngularJS形式在Scope中未定义

我开始在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>

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

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

我不能在jsfiddle找到很多直接的例子，所以我不知道这是否可能是一些奇怪的交互与网站像它(大多数例子我发现没有使用正式的控制器)。我试过Plunker检查一样好，但我遇到同样的问题。

我相信我错过了一些超级明显的东西，但我看不到很多其他东西要改变或调整。任何帮助是极大的赞赏！

在控制器初始运行后，窗体仅将自身注册到控制器的$ scope。因此，即使一切设置正确，console.log($ scope.theForm)也将返回undefined。

在你的示例中，对窗体的存在做出反应，您可以在窗体上设置一个观察器，以根据其存在设置调试文本：

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

这可以在行动在http://jsfiddle.net/9k2Jk/1/看到

形式 – 简单的AngularJS形式在Scope中未定义

猜你在找的Angularjs相关文章