AngularJS:如何将视图中指定的模型(ng-bind）绑定到通过API可用的$资源

AngularJS: How to bind a model specified in the view (ng-bind) to a $resource available through an API?

本文关键字：绑定 API 资源 ng-bind 视图 模型 AngularJS      更新时间：2024-02-05

我正在尝试（在Angular中，在客户端）通过html视图将同一个数据库对象连接到它的等价实例，通过json API。

我有一个工作api和$resource，还有一个工作视图，我只是不知道如何创建绑定，所以视图的更新会更新Angular模型/$resource。

具体来说，我有一个html视图填充的服务器端，其中包含ngBind属性：

<div class="ng-scope" ng-app="Posts">
  <div class="ng-scope" ng_controller="PostsCtrl">
    <span contenteditable="true" ng-bind="post.1.text">post.1.text value</span>
  </div>
</div>

页面上有几个具有唯一ID的。出于示例的目的，如果更容易将其视为表单文本字段，则忽略"contenteditable"，我将单独处理该部分。

该属性的格式是灵活的，这就是目前的情况（即post.1.text可以是post_1_text，也可以根据需要完全拆分。）

资源工厂看起来是这样的（咖啡脚本，但js中的回答同样感激！：

app = angular.module 'Posts', ['ngResource']
app.factory 'Post', ($resource) ->
  $resource('/api/posts/:id', {id: '@id'})
app.controller "PostsCtrl", @PostsCtrl = ($scope, Post) ->
  $scope.posts = Post.query()

它成功地填充了posts集合（本例不需要，但显示API正在工作）。

那么，ng-bind应该是什么样子，以及如何绑定控制器以获得写回API的视图更新？

（我知道我可以使用ng_repeat: "post in posts"，但我真的很想这样做。"这很复杂"：-）

谢谢！

编辑：这里有一个jsfiddle，大致展示了我试图实现的目标：

http://jsfiddle.net/2QfVW/5/

但是我希望id绑定到对象键"id"，而不是绑定到数组中对象的索引。

这里有一个jsFiddle的分叉，有三种变体，这样您就可以看到不同的方法。

我使用了更简单的语法进行绑定。我想您会发现使用｛｛大括号｝｝更容易阅读您的代码。

您的数据设置为一个数组，因此您需要通过数组中的索引来引用它。在我对您的原始代码的修订中，我只是添加了索引。可能没那么有用。

John is {{friends[0].name}} and has id {{friends[0].id}}

下一次添加到您的代码中时，我在js中添加了范围变量，并将它们分配给索引值，这样您就可以在视图中使用这些变量名。可能不是你会使用的方法，但只是给你一个选择的想法。

Joy is {{friends[joy].name}} and has id {{friends[joy].id}}
$scope.joy = 1;    // in the javascript

很可能您想要创建一个查找函数，这是您将看到的下一个添加。在这里，我传入要查找的朋友的id，并循环查找匹配项，然后返回整个朋友对象。在视图中，我可以引用朋友的任何属性。"9"也可以是一个变量名。

Peter is {{getFriend(9).name}} and has id {{getFriend(9).id}}
$scope.getFriend = function(fid) {
    angular.forEach($scope.friends, function(friend, key) {
        if (friend.id == fid) {
            found = friend;
        }
    });
    return found;
};

这有助于回答你的问题吗？我最初的回复应该解释缺失的内容，以便更新模型。

你的问题有点令人困惑，所以如果我不在，请澄清。

我相信你错过的是一个可以用来触发更新的事件。也许您可以详细解释一下UI是如何工作的。用户是否单击按钮提交帖子？是否要根据秒数自动提交？是否希望在每次更改后提交？模糊？

无论事件/计时器是什么，您都可以在控制器中使用它来触发模型保存（或者您想对模型执行的任何操作）。在这种情况下，您只需从视图中引用$scope.post（或其他），因为视图和控制器之间的双向绑定在Angular中是自动的（假设您注入了scope模块）。您不应该在视图中使用ng绑定或ng作用域。

希望我没有完全误解你的问题。

Darryl

相关文章：