QlikSense dynamic rendering of visualizations in 3.0.1

[Anonymous]

I have an existing QS 2.0.6 mashup which also uses AngularJS as its javascript framework.  In the past we successfully rendered elements dynamically an then used the mashup API to render objects within those dynamic elements.  This is no longer working in 3.0.1.  Long story short, we store our page structure in a SQL database - the object IDs are returned as a collection (among other attributes like height & width) and we generate unique HTML elements based on this data, and subsequently call getObject to render visualizations in those elements.

I have a simple example to reproduce the issue.

• In the startup logic of the content's angular controller, create a scope variable and set it to an array.
• Initialize QlikSense with configuration information (host/prefix/port/isSecure)
• Call openApp with the desired app identifier
• Call getObject for 3 known QlikSense visualization object IDs and point that to HTML elements ("qv1", "qv2", and "qv3"). Wrap these API calls in a $timeout delay of at least a couple of seconds, so that you can see the empty elements prior rendering fo QS content.

$scope.iterations = [1,2,3];
var app = qlikInstance.openApp('f8455997-00ac-4a13-9225-d020534fdd9c', config);
$timeout(function () {
  app.getObject('qv1', 'HKMpzvW');
  app.getObject('qv2', 'yHmN');
  app.getObject('qv3', 'NEYfBc');
}, 2000);

• In your angular template HTML, add a repeating element based on the $scope.iterations variable:

<div ng-repeat="i in iterations" class="qv-object" id="{{'qv' + i}}" style="border: 1px solid white; display: inline-block; height: 200px; width: 200px">{{i}}</div>

• The visualizations are removed from the page immediately following the getObject call!  You actually see the rendered elements for the duration of the timeout, then once getObject is called, all 3 elements are removed from the DOM!

If I hard-code the 3 elements, the visualizations render properly:

<div class="qv-object" id="qv1" style="border: 1px solid white; display: inline-block; height: 200px; width: 200px">1</div>
<div class="qv-object" id="qv2" style="border: 1px solid white; display: inline-block; height: 200px; width: 200px">2</div>
<div class="qv-object" id="qv3" style="border: 1px solid white; display: inline-block; height: 200px; width: 200px">3</div>

I look forward to hearing how you suggest we fix this issue.  We are desperate to upgrade to QS 3.0 to take advantage of new features but our dynamic mashup is now useless.

Many thanks,

Alyssa