2

我在我现有的应用程序中添加了少量的 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？

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

4

1 回答 1

6

这里真正的大问题是，在您当前的设置中，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 })

表格将被设置为:)

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

于 2013-06-17T02:11:01.557 回答