Как работать с вложенными данными angularjs и rails?

Question

Я работаю над приложением рельсов для управления и представления изображений друзьям и родственникам.

В этом приложении вы можете иметь

События -> Вложенные события -> EventImages

routes.rb

resources :events do 
    resources :subevents do 
    resources :event_images 
    end 
end 

angularjs часть/страница начинается, когда пользователь выбирает конкретный мероприятие.

На странице редактирования событий я хочу представить Вложенные события и образы, как это:

Subevent1 -> Upload Images Button 
    Image1 Image2 Image3 ... 

Subevent2 -> Upload Images Button 
    Image1 Image2 Image3 ... 

... 

New Subevent Button 

Поэтому в основном я хочу, чтобы представить все имеющиеся Вложенные события и образы внутри каждого подсобытий на одной странице (там может быть несколько subevents и несколько 100 изображений). Пользователь должен иметь возможность добавлять новые субэвенвенты и загружать или удалять изображения для каждого субэвенвента и перемещать изображения между субвентами с помощью перетаскивания. Но добавление/удаление/выгрузка/кошение не является моей проблемой прямо сейчас, я только что упомянул об этом, потому что это может повлиять на решение моей проблемы.

Im используя вложенный нг-повтор, чтобы отобразить всю информацию на странице

<div class="subevent" ng-repeat="subevent in event.subevents"> 
      <li class="img" ng-repeat="image in subevent.event_images"> 
      </li> 
    </div> 

Im новый угловой мир и им с в настоящее время проблемы, о том, как получить данные, мне нужно для страницы, упомянутой выше ,

я придумал две идеи до сих пор:

Получить всю информацию через контроллер апи в вложенном виде:

show.json.jbuilder

json.id @event.id 
json.subevents @event.subevents do |subevent| 
    json.id subevent.id 
    json.name subevent.name 
    json.event_images subevent.event_images do |event_image| 
    json.id event_image.id 
    json.thumb event_image.image({ resize: "150x150" }).url 
    end 
end 

Что будет дайте мне это:

{ 
    "id": "54d75dd9686f6c2594020000", 
    "subevents": [ 
     { 
      "id": "54d75de1686f6c2594030000", 
      "name": "Test", 
      "event_images": [ 
       { 
        "id": "54df3904686f6c41cf0c0000", 
        "thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg" 
       }, 
       { 
        "id": "54df56c5686f6c41cf850100", 
        "thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg" 
       } 
      ] 
     } 
    ] 
} 

И им с помощью restangular, чтобы получить эту информацию

$scope.event = Restangular.one('api/events','<%= @event.id %>').get().$object; 

Но это решение не чувствует прямо ко мне. Когда я начинаю манипулировать страницей (загружая новые изображения/удаляя изображения/движущиеся изображения с одного субвещества на другое), я вижу, что обновляю всю страницу, потому что я не вижу другого способа здесь, как просто удалить одно изображение, например, без перезагрузки полной страницы $ scope.event, чтобы получить обновленную страницу.

Другое решение, которое пришло мне в голову, но до сих пор не работало, было использовать вложенные функции restangular для извлечения всей необходимой информации для моей страницы без необходимости создания отдельного контроллера api.

$scope.event = Restangular.one("events",'<%= @event.id %>').all("subevents").all("event_images"); 

Я не мог найти рабочее решение, которое позволит мне перебрать $ scope.event с нг-повторить, как я сделал выше, и им не уверен, если это будет решить мою общую проблему.

Таким образом, вопросы я хотел бы получить ответы являются:

• Должен ли я придерживаться API контроллера appreaoch или есть способ, чтобы сделать мою вторую идею рабочего, чтобы избавиться от контроллера апи?
• Как я могу манипулировать изображениями/субвентами без перезагрузки всего? (Пример удаления изображения на странице было бы здорово)

Answer 1

Это ответ на ваш второй вопрос, используя текущий API Plunker

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.event = { 
     "id": "54d75dd9686f6c2594020000", 
     "subevents": [ 
      { 
       "id": "54d75de1686f6c2594030000", 
       "name": "Test", 
       "event_images": [ 
        { 
         "id": "54df3904686f6c41cf0c0000", 
         "thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg" 
        }, 
        { 
         "id": "54df56c5686f6c41cf850100", 
         "thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg" 
        } 
       ] 
      } 
     ] 
    }; 
}); 
app.directive('myEvent', function(){ 
    return { 
    scope: { myEvent: '=' }, 
    template: "<div>{{myEvent.id}}<div my-subevent='subevent' ng-repeat='subevent in myEvent.subevents'></div></div>", 
    controller: function($scope){ 
     this.removeSubevent = function(e){ 
     $scope.myEvent.subevents.splice($scope.myEvent.subevents.indexOf(e), 1); 
     }; 
    } 
    }; 
}); 
app.directive('mySubevent', function(){ 
    return { 
    scope: {mySubevent: '='}, 
    template: "<div>{{ mySubevent.name }} <a href='' ng-click='remove()'>remove subevent</a><div my-subevent-img='img' ng-repeat='img in mySubevent.event_images'></div></div>", 
    require: '^myEvent', 
    link: function(scope, ele, attrs, myEventCtrl){ 
     scope.remove = function(){ 
     myEventCtrl.removeSubevent(scope.subevent); 
     }; 
    }, 
    controller: function($scope){ 
     this.removeImg = function(img){ 
     $scope.mySubevent.event_images.splice($scope.mySubevent.event_images.indexOf(img), 1); 
     }; 
    } 
    }; 
}); 
app.directive('mySubeventImg', function(){ 
    return { 
    scope: { mySubeventImg: '=' }, 
    template: "<div><img ng-src='mySubeventImg.thumb'><a href ng-click='remove()'>remove img</a></div>", 
    require: '^mySubevent', 
    link: function(scope, ele, attrs, mySubeventCtrl){ 
     scope.remove = function(){ 
     mySubeventCtrl.removeImg(scope.mySubeventImg); 
     }; 
    } 

    }; 
}); 

index.html

<div my-event="event"></div>