0

I have been trying to get my angular application to make an ajax request as soon as my page is done loading based on the content of a pre-filled hidden field. However, my attemps so far have been rather futile as most methods I've seen so far of running a method on page load don't necessarely wait for fields to be populated. In the following sample code, if(!isNaN(id)) always fails because $scope.item_id is still empty by the time the method is called no matter how I run it, which means parseInt() returns undefined.

<input type="hidden" ng-model="item_id" value="1">
<input ng-model="item_data">

$scope.loadItem = function(){
  var id = parseInt($scope.item_id)
  if(!isNaN(id)){
    $http.get('/items/get/' + id).success(function(data) {
      $scope.item_data = data;
    });
  }
}

How am I supposed to get this method to run after the fields have been initialized, or is there a way to initialise them so that angular will be able to see them before sending the ajax request?

For those wondering, I'm doing this because I need my script to be static and I can only generate the html code on the page, but I'm loading a json array that will be handeled by the script to display a list of objects, meaning I kind of need to fetch it via json. There might be an easier way to do this, but I haven't thought of one so far.

EDIT: Someone proposed that question #14968690 might awnser mine, however my problem is not so much that I can't make an ajax request happen as soon as angular is loading, but that I can't make sure that the data I pass to my view via an hidden input field is already avilable.

EDIT2 (Solution): After tring to get some of the proposed solutions to work, I tried putting my controller script at the end of my body rather than at the beginning and declaring my variable directly in the scope rather than in a field that may or may not be initialized by the time the js runs (and bind an ng-model on this field with that variable if I want to put it in a form) like so:

<script>menu_id=1</script>
<script src="/static/scripts/app.js"></script>

<input type="hidden" name="menuId" ng-model="menu_id">

While that does not anwser the exact question I first asked, it does solve the issue that let me to ask that question.

Santo Guevarra
  • 385
  • 4
  • 8
  • Your explanation why you are trying to set an angular scope variable from html is still not clear. It is actually possible ([jsfiffle](http://jsfiddle.net/otv4xjd9/1/)), but it is a hack and I am sure you're missing some proper logic in your application. Angular way is to do logic from javascript code not from html. Why don't you just load all info dynamically? I can imagine dynamic config, but then one ajax call for config, another to fetch data according to config – Kirill Slatin Mar 18 '15 at 06:36
  • possible duplicate of [Sending event when angular.js finished loading](http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading) – arkoak Mar 18 '15 at 06:53

1 Answers1

0

use ng-value that will provide binding with hidden variable

<input type="hidden" name="item_id" ng-model="item_id" ng-value="item_id=1" />

Or you could create field with two way binding, and then I'll hide it from view.

<div ng-init="item_id=1">
   <input type="text" name="item_id" ng-model="item_id" style="display: none;"/>
<.div>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299