AngularJs 注入谷歌分析脚本标签

Question

我正在尝试将我的谷歌分析脚本注入我的应用程序。我在 index.html 文件的头部有硬编码

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    </script>

这是我的指令：

app.directive('googleAnalytics', function(configFactory){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '../views/gaScript.html',
    link: function(scope,element,attrs){
      configFactory.getconfigs().then(function(configs) {
          scope.gid = configs[0].ga_id;
      });
    }
  };
})

该指令在 gaScript.html 中使用此模板来注入正确的 ga ID

<script>ga('create', '{{gid}}', 'auto');</script>

这是正文中被指令替换的 html 标记

<google-analytics></google-analytics>

问题是我认为页面正在将 <script>ga('create', '{{gid}}', 'auto');</script> 作为字符串读取，而不是解释脚本标签

Answer 1

基于@mparnisari cmets，我能够让它正常工作。这是最终结果，以防万一这对其他人有所帮助。

这是在 index.html 页面的头部硬编码的

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    </script>

这是指令：

app.directive('googleAnalytics', function(configFactory){
  return {
    restrict: 'E',
    replace: true,
    link: function(scope,element,attrs){
      configFactory.getconfigs().then(function(configs) {
          scope.gid = configs[0].ga_id;
          var scriptTag = angular.element(document.createElement("script"));
              scriptTag.text("ga('create', '"+scope.gid+"', 'auto');")
              element.append(scriptTag);
      });
    }
  };
})

这是指令使用的 index.html 正文中的 html 标记

<google-analytics></google-analytics>

我的系统有多个用户。此代码允许每个用户使用自己的 GA id