Using apex:Component within Angular Repeat

Question

I have done a VF Page which pulls data through RemoteAction Methods and display it.

On clicking the row ,jumptron should display its related information whose logic resides in a apex:component.

All i have to do is to pass the record id to the apex:component ,which would query some related object and display the data in apex:dataTable

Eg:At the primitive level this is what am trying to

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat-start="x in data">
        {{x.Name}}
    </li>
     <div ng-repeat-end="end">  
        <div class="jumbotron">
            <div class="row">
                <div class="panel-body">
                        <c:RelatedTask value="{{x.Id}}"/>
                </div>
            </div>
        </div>
    </div>  
</ul>

RelatedTaskComponent:

<apex:component controller="TestCtrl">
    <apex:attribute name="value" description="This is the value for the component." type="String"  assignTo="{!parentId}"/>

    <apex:dataTable value="Collection">
        .....   //some data 
    </apex:dataTable>
</apex:component>

using controller:

public class TestCtrl{
  public String parentId{
    get;
    set{
       this.parentId = value; 
      System.debug('this.parentId:::::::'+this.parentId); /
    }
  }

  public TestCtrl(){
     //logic to query the related data passed on the parentid received from ng-repeat
  }
}

I tried to pull the data based on the parentid from the repeat in the components controller ,but am getting parentid field as "{{x.Id}}" but not the evaluated angular expression.

Answer 1

The Visualforce page is turned into HTML on the server and that HTML is sent to the browser. Angular executes in the browser and modifies the HTML in the browser. For example, ng-repeat causes duplicates of the element it is located on to be made.

At the time when c:RelatedTask executes on the server its argument is just the string "{{x.Id}}" because Angular has not (and cannot) run at that time.

So you need to redesign the page to either make the repeat a Visualforce one so it executes on the server or to get all the data into the page as JSON (as part of the Angular model) so the Angular repeat can be used.

Generally simplest to stick to all server-side rendering or all client-side rendering in an area of the UI.

For your case, you could add another RemoteAction to fetch the data and render it when the row is clicked via your Angular controller.