Question

我有一个主要的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);
    });

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

为什么即使通过路由加载了控制器，也为什么不输出表单？

更新

我的解决方法：

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

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

这意味着我现在可以使用以下形式访问表单中的字段

$scope.form.page2_form[fieldname]

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

Answer 1

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

AngularJS中范围未定义的表格

1 个答案: