0

I am using anuglar with laravel.

laravel is returning a view which includes a users id as hidden input field.

After the view is loaded I want angular to bind the userid to variable and then use it to complete a http get request to the route someotherresource/userid.

When I hard code the route to angular controller it works fine but when I try to input the variable I get an undefined error which I think is because angular is trying to fire the request before the page is fully loaded and the value has been bound to the model

app.js

function resourceController($scope, $http) {
     /*$http.get('/resource' + $scope.userid).success(function(resource) {
        $scope.resource = resource;
     });*/
     console.log($scope.userid);
}

html

<div ng-controller="resourceController">
<form>
<input type="hidden" value="1" ng-model='userid'>
</form>
%% userid %%
</div>

edit: added console.log to the js and %% userid %% to the html. this gives me undefined in the console and nothing displays for %% userid %%.

NB: I have changed the regular {{ }} syntax to %% %% to avoid conflicts the the back-end templating language.

Mark
  • 3,137
  • 4
  • 39
  • 76
  • A little more code needed, how are you using `$scope.resource` and what role does `ng-model=userid` play? Alternatively a jsFiddle example would be handy. – Todd Motto Jan 17 '14 at 12:47
  • once the request is completed $scope.resource will be used to populate various fields that are sortable and searchable to the user. I thought ng-model-'userid' would set the value of userid to the value of that hidden field? I am guessing that is incorrect as it isn't working. I have updated the question with the exact code I am trying but it isn't much more than what was there this is as far as I have gotten with trying to do this unfortunately – Mark Jan 17 '14 at 12:54
  • I can't see any logic inside the Controller that looks like it would give you userid data? You'll need `$scope.userid`. – Todd Motto Jan 17 '14 at 12:56
  • Thanks, even when changed to $scope.userid it is undefined though, that is my problem. sorry actually that was a typo in my question http.get has been updated and its $scope.userid that is returning undefined. – Mark Jan 17 '14 at 12:58
  • Can you add the relevant code to a jsFiddle and will take a look :) – Todd Motto Jan 17 '14 at 12:58
  • Will do thanks. one sec – Mark Jan 17 '14 at 12:59
  • Hope a codepen is ok I havnt used jsfiddle http://codepen.io/Irish1/pen/AGhbe – Mark Jan 17 '14 at 13:03
  • 1
    You should check this question: http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m – Ilan Frumer Jan 17 '14 at 13:14
  • I would love to know what the downvote is for so I can refrain from making the same mistake again – Mark Jan 17 '14 at 13:24

2 Answers2

2

You need to declare your $scope.userid variable. I'd also advise against using regular function declarations for your Controllers, Angular provides modules for you to do this so that the functions do not exist in the global scope:

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

myApp.controller('getRatingsController', function ($scope, $http) {

  $scope.userid = 'Todd Motto';

});

http://codepen.io/anon/pen/mJfwd

Todd Motto
  • 903
  • 6
  • 10
  • Thank you for the controller info I was doing the same as a tutorial I followed I will change to this while my app is small, do you happen to have a link to an article or similar regarding why this is best practice? Just for my own further understanding. – Mark Jan 17 '14 at 13:21
  • 1
    Sure, I've written one: toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day – Todd Motto Jan 17 '14 at 13:24
1

Just adding the ng-model on hidden does not set the model value. It would not get set even in future. Better would be to use something like ng-init to set initial variable and do a watch on its change

See my fiddle http://jsfiddle.net/cmyworld/WjJPT/

If you can define the ng-init on html about the the controller div, you don't even need to do a watch.

Chandermani
  • 42,589
  • 12
  • 85
  • 88