Question

我正在尝试将google analytics ID动态插入脚本中。这样的地方{{configs [0] .ga_id}}存储了id。

<script>
google code....

ga('create', '{{configs[0].ga_id}}', 'auto');
</script>

这不起作用。我也尝试了所有这些，但都失败了。

'{configs[0].ga_id}', 
'configs[0].ga_id', 
+ configs[0].ga_id +

有什么想法吗？

更新：根据MarkoCen

我添加了这个指令，我的html看起来像这样。检查元素时，id正确显示＆＃34; UA-XXXXXXXX-1＆＃34;但是在指令的console.log中我看到了这个＆＃34; {{configs [0] .ga_id}}＆＃34;

<google-analytics id="{{configs[0].ga_id}}"></google-analytics>

app.directive('googleAnalytics', function(){
  return {
    restrict: 'E',
    replace: true,
    template: function(elem, attr){
      console.log(attr.id);
      return "<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');ga('create', '" + attr.id + "', 'auto');</script>"
    }
  }
})

Answer 1

因为Google Analytics不是Angular的一部分，并且模板语法不能在<script>标记内工作，所以您应该创建一个指令来包装代码：

 angular.module('app').directive('googleAnalytics', function(){
     return {
       restrict: 'E',
       replace: true,
       template: function(){
          var configs = [...]; //first get configs from somewhere...
          return "<script>google code... ga('create', '" + configs[0].ga_id + "', 'auto');</script>"
       }
     }
 })

然后您可以将此指令插入<head>

<!DOCTYPE html>
<html ng-app="app">
   <head>
       <google-analytics></google-analytics>
   </head>
</html>

使用Angular将Google Analytics ID转换为脚本

1 个答案: