如何使用AngularJS在HTML中嵌入Qlik Sense元素？

我来帮你梳理下问题所在，以及如何搞定这个嵌入操作～

首先，你的代码里有几个小细节需要先修正，然后我们再明确Qlik Sense对象嵌入的正确逻辑：

1. 修正控制器名称不匹配问题 #

你在控制器里定义的是controller，但视图里用的是ng-controller="datos-generales"，这会导致控制器和视图无法关联，首先得把名称统一：

比如把控制器定义改成：

define([ 'app' ], function(app) {
  app.controller('datos-generales', function($scope, cube) {
    // 后续逻辑写在这里
  });
});

2. 搞懂Qlik Sense getObject的工作方式 #

你可能误解了appSense.getObject()的作用：这个方法会直接把Qlik对象渲染到你指定的DOM元素中，它返回的Promise只是在渲染完成后触发回调，不需要你手动把Promise的结果插入HTML。

你的服务里写了getObject('filter-div', 'ABFqkb')，指定要渲染到ID为filter-div的元素，但视图里的div是id='filtro-datos'，两个ID不匹配，所以渲染不会生效，得把ID统一。

3. 修正后的完整代码 #

服务代码（优化成更灵活的版本，支持传入目标容器和对象ID） #

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);
    
    // 改成接受目标div ID和Qlik对象ID，适配不同场景
    this.getElement = function(targetDivId, qlikObjectId) {
      return appSense.getObject(targetDivId, qlikObjectId);
    };
  });
});

控制器代码 #

define([ 'app' ], function(app) {
  app.controller('datos-generales', function($scope, cube) {
    // 调用服务，传入视图里的div ID和Qlik对象ID
    cube.getElement('filtro-datos', 'ABFqkb')
      .then(function(qlikObject) {
        console.log('Qlik对象渲染完成', qlikObject);
        // 这里可以对qlikObject做后续交互，比如监听选择变化
        // qlikObject.on('selectionChanged', function() { /* 处理逻辑 */ });
      })
      .catch(function(error) {
        console.error('渲染Qlik对象失败', error);
      });
  });
});

视图代码 #

<div ng-controller="datos-generales">
  <!-- 这个div就是Qlik对象的渲染容器，ID要和控制器传入的一致 -->
  <div id='filtro-datos'></div>
</div>

4. 关键说明 #

• getObject方法会自动把Qlik Sense的对象（比如图表、筛选器）渲染到指定的DOM容器里，完全不需要手动插入Promise的结果。
• Promise返回的qlikObject是该Qlik对象的实例，你可以用它添加自定义交互逻辑，比如监听用户选择、调整对象属性等。
• 要确保Qlik Sense的App ID（data.qvf）和对象ID（ABFqkb）是正确的，同时你的Mashup有访问该Qlik App的权限。

这样调整后，当AngularJS控制器加载时，就会触发Qlik对象的渲染，你就能在视图的filtro-datos容器里看到嵌入的Qlik元素了～

内容的提问来源于stack exchange，提问作者Figa17