AngularJS范围内未定义的表格

Question

I have a main JS file which holds a bunch of functions which are used throughout my app. In this JS file I set the routing of the app.

main.js (MainController):

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

In Page 2 I have a form

<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>

I will be using the scope to check the form for validation but currently it is undefined. I am checking this by using the $scope.$watch .

page2.js (Page2Controller):

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

But it is printing out "undefined". I assume that the routing is actually loading in the controller as the ng-init works. However, It does work if I try adding ng-controller="Page2Controller" to <div class="page"> this outputs the form on the $scope.$watch which is what I want but it is running it twice since the controller is being loaded twice.

Why is it not outputting the form even though the controller is being loaded in by the routing?

UPDATE

My fix:

Adding $scope.form = {}; to page2.js (Page2Controller) and changing the form to this:

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

This means that I can now access fields in the form with

$scope.form.page2_form[fieldname]

However, I'm not sure why I have to do this now as I have past applications where I did not need to do the form.form_name aspect of it.

Answer 1

I think your problem is related to JavaScript ProtoTypal inheritance and how Angular.js handling that in 'ng-*' directives. Kindly check that link for more deep understanding to that topic. https://github.com/angular/angular.js/wiki/Understanding-Scopes