时间戳

首页 > 解决方案 > AngularJS中范围内未定义的表单

javascript - AngularJS中范围内未定义的表单

问题描述

我有一个主 JS 文件，其中包含在我的应用程序中使用的一堆函数。在这个 JS 文件中，我设置了应用程序的路由。

main.js (MainController):

    $stateProvider
    .state('page1', {
        url : '/',
        templateUrl : 'page1.html',
        controller : "Page1Controller"
    })
    .state('page2', {
        url : '/',
        templateUrl : 'page2.html',
        controller : "Page2Controller"
    });`

在第 2 页我有一个表格

<div class="outer" ng-controller="MainController">
    <div class="page" ng-init="test();">
        <form id="page2_form" name="page2_form"> 
            <input type="text" id="field1" name="field1"/>
            <input type="text" id="field2" name="field2"/>
        </form>
    </div>
</div>

我将使用范围来检查表单以进行验证，但目前它是未定义的。我正在使用$scope.$watch.

page2.js (Page2Controller):

    $scope.$watch('page2_form', function(page2_form) {
        console.log(page2_form);
    });

但它打印出“未定义”。我假设路由实际上是在 ng-init 工作时加载到控制器中。但是，如果我尝试将 $scope.$watch 上的表单添加ng-controller="Page2Controller"到此<div class="page">输出中，它确实有效，这是我想要的，但由于控制器被加载两次，因此它运行了两次。

为什么即使控制器正在由路由加载，它也不输出表单？

更新

我的修复：

添加并将表单更改为$scope.form = {};：page2.js (Page2Controller)

<form id="form.page2_form" name="form.page2_form"></form>

这意味着我现在可以访问表单中的字段

$scope.form.page2_form[fieldname]

但是，我不确定为什么我现在必须这样做，因为我过去的应用程序不需要执行它的 form.form_name 方面。

标签： javascriptangularjsformsionic-frameworkrouting

解决方案

我认为您的问题与 JavaScript ProtoTypal 继承以及 Angular.js 如何在 'ng-*' 指令中处理它有关。请检查该链接以更深入地了解该主题。 https://github.com/angular/angular.js/wiki/Understanding-Scopes

推荐阅读