Form undefined in scope in AngularJS
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.
javascript angularjs forms ionic-framework routing
asked Jan 3 at 10:27
J.DoJ.Do
69116
add a comment |
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.
javascript angularjs forms ionic-framework routing
asked Jan 3 at 10:27
J.DoJ.Do
69116
add a comment |
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.
javascript angularjs forms ionic-framework routing
asked Jan 3 at 10:27
J.DoJ.Do
69116
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.
javascript angularjs forms ionic-framework routing
javascript angularjs forms ionic-framework routing
asked Jan 3 at 10:27
J.DoJ.Do
69116
asked Jan 3 at 10:27
J.DoJ.Do
69116
edited Jan 3 at 11:40
J.Do
asked Jan 3 at 10:27
J.DoJ.Do
69116
asked Jan 3 at 10:27
J.DoJ.Do
69116
asked Jan 3 at 10:27
J.DoJ.Do
69116
69116
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54020434%2fform-undefined-in-scope-in-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
add a comment |
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
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
add a comment |
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
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
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
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
answered Jan 3 at 12:14
Peter ShakerPeter Shaker
5115
5115
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54020434%2fform-undefined-in-scope-in-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
