How to insert QlikSense Element in html using angularjs

Question

i try to insert some element created in Qlik Sense into mashup app using angularjs. I have an service to get the object from Qlik Sense. Sense send me a promise. But these promise i dont know how insert into html code.

This is my code

define([
'js/qlik',
'app'
], function(qlik, app) {

let prefix = window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf("/extensions") + 1);
let config = {
    host: window.location.hostname,
    prefix: prefix,
    port: window.location.port,
    isSecure: window.location.protocol === "https:"
};

app.service('cube', function() {
    const appSense = qlik.openApp('data.qvf', config);


    this.getElement = function(id) {
        return appSense.getObject('filter-div', 'ABFqkb');
    };
}
});

and this is my controller:

define([
'app',
], function(app) {
app.controller('controller', function($scope, cube) {

    cube.getElement().then(function(data) {
        console.log(data);
    });
    // create a message to display in our view
});
});

my view is something like that

<div ng-controller="datos-generales">
    <div id='filtro-datos'></div>
</div>

someone can help me to insert that element?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Use $q.when to convert the ES6 promise to an AngularJS promise:

app.controller('controller', function($scope, $q, cube) {

    var promise=$q.when(cube.getElement())

    promise.then(function(data) {
        $scope.data = data; 
        console.log(data);
    });

});

HTML

<div ng-controller="datos-generales">
    <div id='filtro-datos'>
        {{data}}
    </div>
</div>

$q.when wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

Update

Alternately, convert the ES6 promise in the service:

app.service('cube', function($q) {
    const appSense = qlik.openApp('data.qvf', config);    
    this.getElement = function(id) {
        var es6promise = appSense.getObject('filter-div', 'ABFqkb');
        return $q.when(es6promise);
    };
}

app.controller('controller', function($scope, ̶$̶q̶,̶ cube) {

    cube.getElement()
      .then(function(data) {
        $scope.data = data; 
        console.log(data);
    });

});

That way controllers don't need to do the conversion.

How to insert QlikSense Element in html using angularjs

1 Answers1

Update