current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

Sorry if this was already asked, but I really didn't find anything that applies exactly to my problem.

Well, although I know that an AngularJS form value must be loaded from controllers and that I can create routes and RESTful resources with AngularJS, I am using Python and Flask to get the page and data but AngularJS to post data to the server. The problem is, when I put "ng-model" within a text input, the value from server is ignored, like so:

<input type="text" ng-model="first_name" value={{user.first_name}}>

is interpreted as:

<input type="text" ng-model="first_name" value="John" class="ng-pristine ng-valid">

but the value cannot be seen, as if there is no "value" attribute.

Given that situation, I tried to use directives, but I didn't realise how to get this server data and share it with another scope.

What I want is to simply load a page with server data inside a ng-model input and access it through controller methods later ("placeholder" is useless here).

I am sending the page like this:

class ShowUser(MethodView):
    def get(self):
        s = Session(request)
        if s.is_logged():
            user = dict({'username': s.user.username, 'first_name': s.user.first_name, 'last_name': s.user.last_name,
                         'email': s.user.email, 'logged': True})
            return render_template('users/show-user.html', user=user)
        else:
            user = dict({'username': 'null', 'logged': False})
            return render_template('index.html', user=user)

It's that "user" variable in "render_template" that I am trying to access.

share|improve this question
2  
You shouldn't use value and ng-model together. ng-model takes the place of value. If $scope.first_name isn't being set in your controller than the input value will not change. Can you verify first_name is being set by whatever web service you are using? Also, if first_name is being set, but it's outside the scope of angular, you'll want to wrap it in an $scope.$apply() –  Ronnie Jul 21 '14 at 17:23
    
The server part is all ok. The problem is, It's impossible to do: $scope.$apply('foo = {{user.first_name}}');. I just don't know how to put a server-processed string inside a Angular controller scope. –  Rodrigo Jul 21 '14 at 17:33
    
How are you loading the data from the server? It must be getting loaded in the controller. Whatever request you make, you can set first_name in the response handler. And that will just do what you want. It'd be better if you can share how you are loading data from the server. –  vaidik Jul 21 '14 at 17:40
    
I don't know python and at this point it is irrelvant(granted your python is working), but how are you making the $http call in your controller? That is what @vaidik was asking –  Ronnie Jul 21 '14 at 18:16
    
Thank you for your replies @vaidik and @Ronnie. I figured out a crazy way of doing it, now I can explain myself better. Doing <span ng-bind="loadData({{user}})"></span>, where "loadData" is a controller method, I can actually access the data. I am not doing $http.get to get this page, that is the problem. –  Rodrigo Jul 21 '14 at 18:33

1 Answer 1

up vote 0 down vote

If you are not going to the server, you can write an angular .value() in the page (I assume {{ }} is from your SERVER-side templating here, NOT Angular's):

<script>
angular.module('app').value('User', {{user}});
</script>

better example, in EJS, you could have:

<script>
angular.module('app').value('User', <%= JSON.stringify(user) %>);
</script>

This must be placed anywhere AFTER the .js that contains your initial angular.module('app', [...])

Then inject User in your controller and scope;

angular.module('app')
  .controller('AppController', ['$scope', 'User',
    function($scope, User) {
      $scope.user = User;
    }
    ]);

Finally, in your HTML:

<input type="text" ng-model="user.first_name" />
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.