从数据库中检索GTM代码并在angularJS app中显示

I have several websites that use an AngularJS app. Each website has different GTM tracking. I'm storing the tracking code in our database. Eg:

我有几个使用AngularJS应用程序的网站。每个网站都有不同的GTM跟踪。我将跟踪代码存储在我们的数据库中。例如:

<!-- Google Tag Manager -->
    <noscript>
        <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <script>
(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
        new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXX');</script>
    <!-- End Google Tag Manager -->

In my angular app, I've retrieved the code, but how do I go about inserting it into my HTML? I tried:

在我的角度应用程序中,我已经检索了代码,但是如何将其插入到我的HTML中呢?我试过了:

<div id="tracking">
    {{tracking}}
</div>

but this displays the code on the screen.

但这会在屏幕上显示代码。

2 个解决方案

#1

this may help you

这可能对你有帮助

instead of

<div id="tracking">
    {{tracking}}
</div>

you write that

你写的那个

<div ng-bind-html="tracking">
</div>

in script you must do

在脚本中你必须这样做

<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>

and inject in the module

并注入模块

var app = angular.module('myApp', ['ngSanitize']);

#2

It seems that the solution is to use the $sce service. Example here: http://erikaugust.com/thoughts/ng-bind-html/

似乎解决方案是使用$ sce服务。示例:http://erikaugust.com/thoughts/ng-bind-html/

#1