范围内未定义简单的 AngularJS 表单 [英] Simple AngularJS Form is undefined in Scope

问题描述

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

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

HTML

<h1>形式</h1><表格名称="theForm"><input name="myName" type="text" ng-model="model.name"/><input name="submit" type="submit"/></表单>

JS

var app = angular.module('angularTest', []);app.controller('MainCtrl', ['$scope', function($scope) {$scope.model = { name: '模型名称' };console.log($scope.theForm);//显示'未定义'}]);

我在 jsfiddle 上找不到很多直接的例子，所以我不确定这是否可能是与类似网站的一些奇怪的交互(我发现的大多数例子都没有使用正式的控制器).我也试过在 Plunker 上进行检查，但我遇到了同样的问题.

我确定我遗漏了一些非常明显的东西，但我在这里看不到很多其他的东西可以改变或调整.非常感谢任何帮助！

解决方案

该表单仅在控制器初始运行后 向控制器的 $scope 注册自身.因此，即使一切设置正确，console.log($scope.theForm) 也会返回 undefined.

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

$scope.$watch('theForm', function(theForm) {如果(表格){$scope.formDebugText = '范围内的表单';}别的 {$scope.formDebugText = '表单未定义';}});

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

I'm starting to play around with AngularJS forms in jsfiddle and I've come across a problem already where a very simple form example is not working as expected. All I have is a named form and it's not showing up in scope for some reason (I'm expecting a FormController instance).

I have a fiddle set up, and below is the basic code:

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'
}]);

I can't find a lot of straightforward examples of this on jsfiddle, so I wasn't sure if this could be some strange interaction with sites like it (most examples I find aren't using formal controllers). I've tried on Plunker to check as well, but I encounter the same problem.

I'm sure I'm missing something super obvious, but I can't see many other things to change or tweak here. Any help is greatly appreciated!

解决方案

The form only registers itself with the $scope of the controller after the controller has initially run. Therefore the console.log($scope.theForm) will return undefined even if everything is setup correctly.

In your example to react to the presence of theForm, you can setup a watcher on theForm to set debug text depending its presence:

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

which can be seen in action at http://jsfiddle.net/9k2Jk/1/

这篇关于范围内未定义简单的 AngularJS 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！