Embedding Widgets using ng-repeat

[seanrichter]

I want to embed a widget for each item in a collection. I would like to pass a data property in each widget instance. Can I not pass an object? Only a string? 

Sample: 

<widget ng-repeat="member in c.requestData.team track by $index" id="ns-team-avatar" options="{'member': member}"></widget>

I read the example docs but I don't want to have to make a collection on the server and then render the UI. I am trying to avoid all the server side work that locks up each UI page. I want to do all my async data calls from the client. 

[SatheeshKumar]

I think it should work, Did you tried implementing this?

[seanrichter]

It doesn't work when sending objects on the fly because the widget instance is precompiled. Super frustrating.

[Matthew Maes]

You can do this as follows:

*note in my example the embedded widget is looking for a "sys_id" option for the table its loading from...

HTML Template

<ng-container  ng-repeat="item in data.widgets"><sp-widget widget="item"></sp-widget></ng-container>

Client Script: (if you want to load on the fly)

$scope.loadWidgets = function(){						 
   c.server.get({widgetIds:c.data.widgetIds}).then(function(r) {            
      c.data.widgets = r.data.widgets;
      $scope.loading = false;
   });
}

Server Script: *note if you want to load upfront do this in the if(!input) part of your server script.

else if (input.widgetIds){
   var ids = [];		
   for (var i = 0; i < input.widgetIds.length; i++) {
      ids.push(input.widgetIds[i].id);
   }
   data.widgets = loadWidgets(ids);
}

function loadWidgets(ids){
   var widgets = [];
   for (var i = 0; i < ids.length; i++) {
       var options = {your_option_id : ids[i]};
       widgets.push($sp.getWidget("your_widget_id", {your_option_id : ids[i]}));
   }
   return widgets
}