用现有的值填充AngularJS模型

Question

我正在向我现有的应用程序添加少量的angularjs。我开始使用控制器来管理我的表单，这都是由ajax提交的。表单目前是使用jQuery的$.load()函数拉入页面的，并且表单元素已经有值了。

我希望我的模型我已经分配到$scope有这些值可用。例如:

<form>
  <input type="text" ng-model="user.firstName" value="Gregg" />
  <input type="text" ng-model="user.lastName" value="Bolinger" />
  <button ng-click="update(user)">Save</button>
</form>

然后在main。js文件中，我将有如下内容:

function UserCtrl($scope) {
  $scope.update = function(user) {
    // update the user
  };
}

因为ng-model是空的，所以我的表单输入元素是空的。是否有一种方法来初始化我的ng模型与现有的值在形式?

顺便说一句，我确实读过这个SO问题，这和我的问题一样，但是，我希望得到一个比一些窗口作用域的全局变量更好的答案。

Answer 1

这里真正的大问题是，在您当前的设置中，jQuery在angular世界之外运行。它没有角作用域的概念，也没有任何真正的方法来访问它们，而不会有点笨拙和违背angular的工作原理，但是如果你想的话，你可以这样做。

从jQuery加载完数据后，你可以直接在angular模型中设置这些值，而不是设置表单的值。比如你的页面是

<div class="wrapper" ng-controller="UserCtrl">
    <form>
        ... inputs as in your post ...
    </form>
</div>

然后在控制器中放入

$scope.user = {
    firstName: "",
    lastName: ""
}

那么你实际上可以在任何时候从jQuery获得角度作用域。在本例中，您只需执行

$(".wrapper").scope();

在jQuery中，你可以获取你正在做的数据，然后在范围内赋值。例如，你可以输入

var user = ... load data with jquery here ...;
var scope = $(".wrapper").scope();
var $user = scope.user;
scope.$apply(function() {
    $user.firstName = user.firstName;
    $user.lastName = user.lastName;
});

从理论上讲，这应该能满足你的要求。

然而，我强烈建议你将数据加载也移到angular中，因为这使生活变得更容易，更少令人困惑。Angular让数据加载和jQuery一样简单，这很好，如果你要使用ngResource(我个人很喜欢)，你可以通过简单的 来获取一个用户。

User.get({ id: user_id_here })

就是这样。然后在控制器中，你只需输入

$scope.user = User.get({ id: user_id_here })

表单将被设置为:)

但正如我所说，如果你愿意，你可以让它与当前结构内联运行