AngularJS:在页面加载时使用服务器数据更改输入值

时间:2014-07-21 17:15:54

标签: javascript python angularjs flask

很抱歉,如果已经提出这个问题,但我确实找不到任何适用于我的问题的内容。

好吧,虽然我知道必须从控制器加载AngularJS表单值,并且我可以使用AngularJS创建路由和RESTful资源,但我使用Python和Flask来获取页面和数据,但AngularJS将数据发布到服务器。问题是,当我在文本输入中放入“ng-model”时,服务器的值将被忽略,如下所示:

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

被解释为:

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

但是无法看到该值,就好像没有“value”属性一样。

鉴于这种情况,我尝试使用指令,但我没有意识到如何获取此服务器数据并与另一个范围共享。

我想要的是简单地在ng-model输入中加载包含服务器数据的页面,然后通过控制器方法访问它(“占位符”在这里没用)。

我发送的页面是这样的:

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)

我试图访问“render_template”中的“user”变量。

1 个答案:

答案 0 :(得分:0)

如果你不去服务器,可以在页面中写一个有角度的.value()(我假设{{}}来自你的SERVER端模板,而不是Angular的):

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

更好的例子,在EJS中,您可以:

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

这必须放在包含您的初始.js

angular.module('app', [...])之后的任何位置

然后在您的控制器和范围中注入User;

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

最后,在您的HTML中:

<input type="text" ng-model="user.first_name" />