Angularjs应用程序中不提供Document.currentScript属性

如何解决Angularjs应用程序中不提供Document.currentScript属性

我需要对一个复杂的Angularjs 1.6.0应用程序进行更改，对于该应用程序，我只有代码，没有经过培训。该体系结构是现有的，所以我选择在现有的组件上进行工作，而不是创建新的组件（新的指令）。

我被赋予了静态HTML来嵌入以显示QR码

<script async
                src="https://demo.dizme.io/widget-svc-static/widget_viewer/dizme_widget.js"
                data-dizme-api="000-111-222"
                data-onauth="onDizmeAuth(res)" data-ondebug="onDebug(res)" data-request-orgid="Agos" data-request-restrictions=''
                data-request-userid="default_user_id" data-request-context="/verify_widget"
                data-request-mread="True" data-request-prid="PROOF_AGOS_0000001" data-request-requestuid=""
                data-lang="it" data-size-widget="large"></script>

必须在按钮的“单击时”事件上呈现。我选择了现有的控制器，该控制器已在vm作用域对象上正确注入了可变参数

    function openDizme($event) {
        var dizmeElement = angular.element(document.getElementById('dizmeQrCodeRegion'));
        if (!dizmeElement)
            throw 'Element not found';
        var scriptElement = angular.element('<script />');
        scriptElement.attr('data-dizme-api',vm.dizmeApi);
        scriptElement.attr('data-onauth','onDizmeAuth(res)');
        scriptElement.attr('data-ondebug','onDebug(res)');
        scriptElement.attr('data-request-orgid',vm.dizmeOrgId);
        scriptElement.attr('data-request-restrictions','');
        scriptElement.attr('data-request-userid','default_user_id');
        scriptElement.attr('data-request-context','/verify_widget');
        scriptElement.attr('data-request-mread','true');
        scriptElement.attr('data-request-prid',vm.dizmePrid);
        scriptElement.attr('data-request-requestuid',vm.dizmeUid);
        scriptElement.attr('data-lang','it');
        scriptElement.attr('data-size-widget','large');
        scriptElement.attr('src',"https://demo.dizme.io/widget-svc-static/widget_viewer/dizme_widget.js");

        dizmeElement.append(scriptElement);
    };

在HTML方面，我设置了一个空的div，以将脚本附加为子级

<div class="row-buttons">
    <button type="button" ng-click="vm.oneshotLTPath()">No</button>
    <button type="button" ng-class="{disable: !vm.dizmeEnabled}" ng-click="vm.DizmePopup($event)">Yes</button>
</div>
<div id="dizmeQrCodeRegion"></div>

但是，它显然什么也不做。 该代码被调用，我可以对其进行调试。

事实上，我还通过添加一些日志记录来创建了Plunker。

它适用于Plunker。点击点击我按钮

后，QR码就会出现

在我的Webpack开发服务器中，它根本无法工作。我已经逐步调试了代码，发现以下内容：

页面从https://demo.dizme.io/widget-svc-static/widget_viewer/dizme_widget.js加载远程脚本时，我在其中调试了脚本

    function initWidget(widgetEl) { #Line 52
        var widgetId,widgetElId,widgetsOrigin,existsEl,src,styles = {},allowedAttrs = [],defWidth,defHeight,onAuthUser,onDebug;

        if (widgetEl.hasAttribute('data-dizme-api')) { #Line 57

第57行的值为false。变量widgetEl（请参见第197行）等于document.currentScript，并且看起来除src之外基本上没有其他属性

document.currentScript.attributes
NamedNodeMap {0: src,src: src,length: 1}

我当然不能修改远程脚本。我也无法从供应商那里获得Angularjs API。

有人知道为什么它仅适用于Plunker而不适用于本地吗？我正在使用Google Chrome和Microsoft Edge（Chromium）进行调试

Angularjs应用程序中不提供Document.currentScript属性

如何解决Angularjs应用程序中不提供Document.currentScript属性

相关推荐