angularjs $scope.InputModelName is undefined

Question

I have one input field and trying to get the value from this.

<!DOCTYPE html>
<html ng-app="Application">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
app.controller('ApplicationRootController', function ($scope) {
    console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
    $scope.SubmitFunction = function(){
        console.log("[Value - which come out only after form submitted] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
    };
});
</script>
</head>

<body>  
    <form id="ApplicationRoot" 
        ng-controller="ApplicationRootController" 
        ng-submit="SubmitFunction()" >

        <button type="submit">Submit</button>

        <div id="AntiForgeryKeyHolder">
            <input 
                id="antiForgeryToken_test" 
                ng-model="antiForgeryToken_test"            
                ng-init="antiForgeryToken_test='PassKey123456789'"
                type="hidden" />
        </div>

    </form> 
</body>
</html>

But what I got is undefined, So I tried using form submitting, then value come out.
So my question is

How to get value from this simple input field without submitting form?

Plunker

Updated

Why console.log give me undefined since the same code give me value when it was called by submitting form ?

I don't really understand the question. But your usage of `ng-init` is wrong, see doc https://docs.angularjs.org/api/ng/directive/ngInit. If you want to initialize the value of model, you should do so in the controller itself. — David Votrubec, Nov 03 '15 at 07:57
Code looks fine what is your issue? Even plunker is working fine. — Dhaval Marthak, Nov 03 '15 at 07:58
code in view - called after code inside controller, so you can do trick with `setTimeout` and in callback - check value that you need: for example http://plnkr.co/edit/FmzAuxN5UVmFp3iz9CI1?p=preview — Grundy, Nov 03 '15 at 08:00

score 0 · Answer 1 · answered Nov 03 '15 at 08:20

0

Code placed in view, executed after code placed in js controller. So when controller execute and call line

console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);

ng-init in view yet not work.

For solve this you can use setTimeout like

setTimeout(function(){ 
    console.log("[Controller level value - which never come out] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
});

here callback execute after delay, so it can be after ng-init

updated plunker

answered Nov 03 '15 at 08:20

Grundy

13,356
3
35
55

Is there any event like `form loaded completely` rather than `setTimeout`? – Frank Myat Thu Nov 03 '15 at 08:25
1

@FrankMyatThu, you can see about [AngularJs event to call after content is loaded](http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded). ofcourse if you use `ng-view` – Grundy Nov 03 '15 at 08:30

score 0 · Answer 2 · answered Nov 03 '15 at 08:23

0

Wait till controller scope receives the ng-init data from UI.

var app = angular.module('Application', []);

app.controller('ApplicationRootController', function ($scope, $timeout) {
    $timeout(function(){console.log($scope.antiForgeryToken_test);}, 2000);
});

answered Nov 03 '15 at 08:23

venkat7668

2,657
1
22
26

Is there any event like `form loaded completely` rather than `setTimeout` – Frank Myat Thu Nov 03 '15 at 08:26
checkout $viewContentLoaded documentation – venkat7668 Nov 03 '15 at 08:58

score 0 · Answer 3 · answered Nov 03 '15 at 09:10

0

After I got great knowledge from @Grundy code in view - called after code inside controller

So, I was trying to fire code from controller only when the content is fully loaded. My final solution is below

angular.element(document).ready(function () {
        console.log("[Value - After form loaded completly] $scope.antiForgeryToken_test = " + $scope.antiForgeryToken_test);
});

Plunker

answered Nov 03 '15 at 09:10

Frank Myat Thu

4,448
9
67
113

not recommended use jqLite in controller, seems like you try solve some another problem? why not just assign this token inside controller? Try see about [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Grundy Nov 03 '15 at 09:27
@Grundy, My token key is come from `Asp.net Razor server side code`. I am not sure `controller js` can execute razor function `@GetAntiForgeryToken()`. More detial at http://techbrij.com/angularjs-antiforgerytoken-asp-net-mvc – Frank Myat Thu Nov 03 '15 at 09:45
yep, but you can save result for `@GetAntiForgeryToken()` in global variable and use it – Grundy Nov 03 '15 at 09:53
or even move part with jqLite to directive – Grundy Nov 03 '15 at 10:03
I am wondering if global variable approach will not be different since code inside the controller js run first. But I really interest to know detail how can I go with directive rather than jqLite, I will be very happy if you can guide me. – Frank Myat Thu Nov 03 '15 at 10:09
i mean not directive instead jqLite, but _move code with jqLite_ into directive. As for global var - so here do somewhere in start page: `var f = '@GetToken()';` and this `f` variable awail in any js code because it _global_ – Grundy Nov 03 '15 at 10:15
Great, you global variable solution also solve my problem. But most of every examples show anti-forgery key to keep at hidden form field. But using global var solution, I no longer need to use hidden field. Is this correct approach for anti-forgery cause? – Frank Myat Thu Nov 03 '15 at 10:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94083/discussion-between-grundy-and-frank-myat-thu). – Grundy Nov 03 '15 at 10:40

angularjs $scope.InputModelName is undefined

Updated

3 Answers3