Use AngularJS to retrieve nested resource in Rails

Question

I have been working on implementing AngularJS into my Rails app based on the Railscast as a starting point. My question is similiar to this question: Angular JS ngResource with nested resources, however I have not found a solution to my problem.

Currently I have a nested resource which I am displaying on the view of the parent resource, via a partial. I need to supply the project_id in the query in order to retrieve the tasks, so I have:

app.factory "Task", ["$resource", ($resource) ->
  $resource("/projects/:project_id/tasks/:id", {project_id: "@project_id", id: "@id"}, {update: {method: "PUT"}})
]

@TaskCtrl = ["$scope", "Task", ($scope, Task) ->
  $scope.tasks = Task.query({project_id: "@project_id", id: "@id"})

My question is, how do I set '@project_id' in the view so that on the last line in my example the value is accessible in the controller? I tried using ng-init:

<div ng-controller="TaskCtrl" ng-init="project_id = <%= @project.id %>">

However once in my TaskCtrl controller 'project_id' is blank, and '$scope.project_id' does not work either. Any help is appreciated.

Oliver · Accepted Answer · 2013-06-05 13:06:32Z

5

ng-init runs before template execution, not before controller init. If only the template is aware of the project_id, create a shared service (it can be a simple value factory) which holds the project id and inject it to your controller. You can fill that service from another controller initialised before TaskController

<div ng-controller="ProjectIDController">
    <span ng-init="project_id = <%= @project.id %>"></span>
</div>

<div ng-controller="TaskCtrl">
    ...
</div>

function ProjectIDController( $scope, sharedService ) {
    $scope.$watch('project_id', function (UID) {
        sharedService.setProjectID($scope.project_id);
    });
}

function TaskCtrl ($scope, Task, sharedService) {
    $scope.tasks = Task.query({project_id: sharedService.getProjectId()... 
}

sorry for not coffee...

answered Jun 5, 2013 at 13:06

Oliver

4,4712 gold badges23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drew Over a year ago

Thanks for the response, Olivér. Question: If ng-init is being accessed by ProjectID Controller, why can I not move the project_id span into Task Controller? Granted I am new to angularjs, but it seems like if values are included within the Controller they should be accessible from the scope.

Oliver Over a year ago

Sure, you can do that, but you still have to $watch the project_id, since it does not have a value on controller init. But if you need the project_id in another controller, sibling for TaskCtrl, it wont see project_id, only children will. Thats where the service came along.

Drew Over a year ago

Thanks for all your help but this wasn't quite working for me ... I used the gon gem to pass in the value. It seems like acquiring normal field values from the view should be a bit easier in AngularJS.

Chris Edwards Over a year ago

I can't get this working, can you explain what the sharedService factory would look like?

Drew · Accepted Answer · 2013-06-05 14:33:17Z

0

While this doesn't solve the problem via AngularJS, I ended up just passing in the value via the gon gem:

projects controller:

  def show
    gon.project_id = @project.id
    .
    .
  end

coffee js file:

$scope.tasks = Task.query({project_id: gon.project_id})

answered Jun 5, 2013 at 14:33

Drew

2,6318 gold badges44 silver badges66 bronze badges

1 Comment

Chris Edwards Over a year ago

I get gon is not defined when using this method. Any ideas?

Community · Accepted Answer · 2017-05-23 12:33:58Z

0

gon isn't a good solution

http://docs.angularjs.org/api/ng.directive:ngInit

or you can try this

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Aug 2, 2013 at 2:49

Aray Karjauv

2,9552 gold badges31 silver badges46 bronze badges

2 Comments

ramz15 Over a year ago

why is gon a bad solution?

Aray Karjauv Over a year ago

it seems to me that it breaks angularjs philosophy and single page pattern

Collectives™ on Stack Overflow

Use AngularJS to retrieve nested resource in Rails

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related