I have written several posts on Angular.js and the Capabilites API which are based on the template GitHub - yianni-ververis/capabilities-api-angular-template: A simple mvc template for building webpa...
In this one I will use the Capabilities API app.getObject and use it the Angular way as a directive.
The only code that you will need is in the html to add the object id and the height of the object:
<get-object qvid="'298bbd6d-f23d-4469-94a2-df243d680e0c'" id="'298bbd6d-f23d-4469-94a2-df243d680e0c'" height="400"></get-object>
If you want to disable interactions you can just add the attribute interaction="false" like below
<get-object qvid="'298bbd6d-f23d-4469-94a2-df243d680e0c'" id="'298bbd6d-f23d-4469-94a2-df243d680e0c'" height="400" interaction="false"></get-object>
The rest are handled by the app!
This directive also covers the memory management issue that I blogged about, Angularjs and Capabilities API - Memory management and "qv-collapsed-listbox-delegated-open" error, by closing all of the objects on navigation.
Just make sure you add the location change after the api.destroyObjects() method is resolved like
api.destroyObjects().then(function(){
$location.url('/' + page);
});
Branch: http://branch.qlik.com/#!/project/56b4a40140a985c431a64b08
Git: GitHub - yianni-ververis/capabilities-api-angular-template: A simple mvc template for building webpa...
Yianni
