AngularJS：页面加载时用服务器数据改变输入值

Question

抱歉如果这个问题之前有人问过，但我真的没找到完全符合我问题的内容。

好吧，虽然我知道在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”属性一样。

在这种情况下，我尝试使用指令，但我不知道怎么获取这个服务器数据并与另一个作用域共享。

我想要的只是简单地加载一个包含服务器数据的页面，并在后面通过控制器的方法访问这个数据（“placeholder”在这里没用）。

我这样发送页面：

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”变量。

Answer 1

如果你不需要去服务器的话，可以在页面上写一个 Angular 的 .value()（我假设这里的 {{ }} 是来自你服务器端的模板，而不是 Angular 的）：

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

更好的例子，在 EJS 中，你可以这样写：

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

这个代码必须放在包含你初始 angular.module('app', [...]) 的 .js 文件之后的任何地方。

然后在你的控制器和作用域中注入 User；

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

最后，在你的 HTML 中：

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