使用现有值填充 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-model？

顺便说一句，我确实读过this SO Question，这与我的相同，但是，我希望得到比某些窗口范围的全局变量更好的答案。

Answer 1

这里真正的大问题是，在您当前的设置中，jQuery 是在 Angular 世界之外运行的。它没有角度范围的概念，也没有任何真正的访问它们的方式，而不会有点hacky和违背角度的工作原理，但是如果你愿意，你可以这样做。

从 jQuery 加载数据后，无需设置表单的值，您可以直接在角度模型中设置值。例如，如果您的页面类似于

<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 })

表格将被设置为 :)

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