AngularJS: Как привязать модель, указанную в представлении (ng-bind) к ресурсу $, доступному через API?

Question

Я пытаюсь подключить (в Angular, у клиента) тот же объект базы данных через свой html-представление, к его эквивалентному экземпляру через json API.

У меня есть рабочий api и ресурс $, и у меня есть рабочий вид, я просто не могу понять, как создать привязку, чтобы обновления к обновлению отображали ресурс Angular model/$.

В частности, у меня есть вид 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> 

Есть несколько из них на странице с уникальной ids.For цели, например, если это проще подумайте об этом как текстовом поле формы, затем проигнорируйте «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() 

успешно заполнит коллекцию сообщений (не требуется для этого примера, но показывает API работает).

Итак, что нг-связывание взгляд как, и как связать contro ller, чтобы получить обновления представления, написанные обратно в API?

(я знаю, что я мог бы просто использовать ng_repeat: "post in posts", но просто пойти со мной, что я действительно хочу сделать это. «Это сложно» :-)

Спасибо!

Edit: Вот jsfiddle, который показывает примерно то, что я пытаюсь достичь:

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

... но я хотел бы идентификатор, чтобы привязать к ключу объекта «ид», а не к индексу объекта в массиве.

Answer 1

Here's a fork of your jsFiddle с тремя вариациями, так что вы можете увидеть различные методы.

Я использовал простой синтаксис для привязки. Я думаю, вы найдете, что ваш код легче читать с помощью {{braces}}.

Ваши данные настроены как массив, поэтому вам нужно ссылаться на него по индексу внутри массива. В моем пересмотре исходного кода я просто добавил индекс. Наверное, это не так полезно.

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

I следующее дополнение к вашему коду, я добавил область видимости переменные в JS и приписал их значения индекса, так что вы можете использовать эти имена переменных в представлении. Наверное, не тот подход, который вы будете использовать, а просто для того, чтобы дать вам представление о вариантах.

Joy is {{friends[joy].name}} and has id {{friends[joy].id}} 

$scope.joy = 1; // in the javascript 

Скорее всего, вы захотите создать функцию поиска, которая станет следующим дополнением, которое вы увидите. Здесь я передаю идентификатор друга, которого хочу найти, и петлю, чтобы найти совпадение, а затем вернуть весь объект-друга. В представлении я могу ссылаться на любое из свойств друга. «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; 
}; 

Помогло ли это ответить на ваш вопрос? Мой первоначальный ответ должен объяснить, чего не хватает, чтобы обновить модель.

Answer 2

Ваш вопрос немного запутанный, поэтому, если я уйду, прошу уточнить.

Я считаю, что вам не хватает события, которое вы можете использовать для запуска обновления. Возможно, вы сможете объяснить, как работает пользовательский интерфейс. Пользователь нажимает кнопку, чтобы отправить сообщение? Вы хотите, чтобы он автоматически отправлялся на основе секунд? Вы хотите, чтобы он был представлен после каждого изменения? На размытие?

Независимо от события/таймера, вы должны использовать это в своем контроллере для запуска сохранения модели (или того, что вы хотите сделать с вашей моделью). В этом случае вы просто ссылаетесь на $ scope.post (или что-то другое) из вашего представления, поскольку двусторонняя привязка между представлением и контроллером автоматически в Angular (при условии, что вы вводите модуль области видимости). Вам не нужно использовать ng-bind и ng-scope в вашем представлении.

Надеюсь, я не полностью не понимаю ваш вопрос.

Дэррил