使用现有值填充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在角度世界之外运行.它没有角度范围的概念,或任何真正的访问它们的方式,而不是一点点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使得数据加载就像jQuery一样简单,这很好,如果你使用ngResource(我个人喜欢),你可以通过简单的方式获取用户

User.get({ id: user_id_here })

就是这样.然后在你的控制器中,你就可以了

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

表格将设置为:)

但正如我所说,如果您愿意,可以让它与您当前的结构内联