使用 angularjs 调用普通的 javascript答案

【问题标题】：call normal javascript using angualrjs使用 angularjs 调用普通的 javascript
【发布时间】：2016-03-30 15:27:54
【问题描述】：

我正在尝试将用于联盟跟踪的旧 javascript 代码包含到 angularjs 应用程序中

<script type="text/javascript">
        //<![CDATA[ 

        /*** Do not change ***/
        var AWIN = {};
        AWIN.Tracking = {};
        AWIN.Tracking.Sale = {};

        /*** Set your transaction parameters ***/
        AWIN.Tracking.Sale.amount = '{{order_total}}';
        AWIN.Tracking.Sale.orderRef = '{(order_id}}';
        AWIN.Tracking.Sale.parts = '{{cats}}';
        AWIN.Tracking.Sale.voucher = '';
        AWIN.Tracking.Sale.currency = 'GBP';
        AWIN.Tracking.Sale.test = '0';
        AWIN.Tracking.Sale.channel = 'aw';
        //]]>
    </script>

我需要调用上面的代码（用 angualr vars 填充占位符）然后调用这个：

    <script src="https://www.dwin1.com/xxxx.js" type="text/javascript" defer="defer"></script>

最好的方法是什么？我尝试将代码放入 Angular 函数但没有成功我还尝试将变量向下传递到 $window 并尝试将它们插入到我最后的 CDATA 中但没有成功。有什么想法吗？

我应该将此代码添加到封装在 angualrjs 控制器中的 HTML 页面中

【问题讨论】：

你想达到什么目的？这看起来对 Angular 解决问题的方式不太熟悉
从高层次上看，理想的方法是将此javascript放入指令中。这就是我通常包含插件的方式。
你的代码是一个简单的对象。您需要从哪里访问此对象？当你把它放在你的角度代码中时，什么不起作用？
您可以拥有一个带有 AWIN 对象的指令，然后当您拥有所需的一切时，您可以从该指令注入脚本标签。如果您需要更多帮助，请告诉我。

标签： javascript angularjs cdata

【解决方案1】：

你正在尝试的东西不能直接使用 angularjs。您需要执行以下操作

//Note: this is a new JS file included in your main html

(function() {
    "use strict";

    window.AWIN = {};

    window.populateAwin = function(args) {
        //<![CDATA[ 

        /*** Do not change ***/
        AWIN.Tracking = {};
        AWIN.Tracking.Sale = {};

        /*** Set your transaction parameters ***/
        AWIN.Tracking.Sale.amount = args.order_total;
        AWIN.Tracking.Sale.orderRef = args.order_id;
        AWIN.Tracking.Sale.parts = args.cats;
        AWIN.Tracking.Sale.voucher = '';
        AWIN.Tracking.Sale.currency = 'GBP';
        AWIN.Tracking.Sale.test = '0';
        AWIN.Tracking.Sale.channel = 'aw';
        //]]>
    }

}());

然后您需要通过传递所需数据从控制器调用此函数，如下所示

populateAwin({
   order_total: $scope.order_total,
   order_id: $scope.order_id,
   cats: $scope.cats
});

完成此操作后，您可以继续从控制器中动态包含脚本，如下所示

var scriptEl = document.createElement("script");
scriptEl.type = "text/javascript";
scriptEl.defer = "defer";
scriptEl.src = "https://www.dwin1.com/xxxx.js";

document.body.appendChild(scriptEl);

【讨论】：