0

I'm trying to connect (in Angular, at the client) the same database object through its html view, to its equivalent instance through a json API.

I have a working api and $resource, and have a working view, I just can't figure out how to create the binding, so that updates to the view update the Angular model / $resource.

Specifically, I have an html view populated server side that contains an ngBind attribute:

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

There are several of these on the page with unique ids.For the purpose of the example, if it's easier to think of this as a form text field, then ignore 'contenteditable', an I'll deal with that part separately.

The format of that attribute is flexible, that's just how it is currently (i.e. post.1.text could be post_1_text, or split up entirely as needed.)

The resource factory looks like this (coffee script, but answers in js equally gratefully received!:

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

which successfully populates a posts collection (not needed for this example, but shows the API is working).

So, what should ng-bind look like, and how to bind the controller to get updates to the view written back to the API?

(I know I could just use ng_repeat: "post in posts", but just go with me that I really do want to do this. "It's complicated" :-)

Thanks!

Edit: Here's a jsfiddle that shows roughly what I'm trying to achieve:

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

...but i'd like the id to bind to the object key 'id' rather than to the index of the object in the array.

4

2 回答 2

1

这是您的 jsFiddle 的一个分支，具有三种变体，以便您可以看到不同的方法。

我使用更简单的语法进行绑定。我认为您会发现使用 {{braces}} 会更容易阅读您的代码。

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

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

这有助于回答你的问题吗？我最初的回复应该解释为了更新模型而缺少什么。

于 2013-12-03T07:25:55.477 回答
0

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

我相信您缺少的是可以用来触发更新的事件。也许您可以解释更多 UI 是如何工作的。用户是否单击按钮来提交帖子？您希望它基于秒自动提交吗？您希望在每次更改后提交吗？模糊？

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

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

达里尔

于 2013-12-02T04:29:52.757 回答