指令中的跟踪代码脚本

Tracking code script in directive

本文关键字：代码 脚本 跟踪 指令      更新时间：2023-09-26

我正在尝试构建一个指令来动态导入主页中的跟踪代码脚本：

<trackingcode trackingcodevalue="{{padCtrl.trackingnumber}}"></trackingcode>

该指令：

(function () {
'use strict';
angular.module('directives.trackingcode', ['pascalprecht.translate', 'ngSanitize'])
  .directive('trackingcode', function () {
    return {
      restrict: 'E',
      //parameter
      scope: {
        trackingcodevalue: '@' //<-- Here
      },
      link: function (scope) { },
      //template definition
      templateUrl: 'directives/trackingcode/trackingcode.html'
    }
  });
}).call(this);

和模板：

<pre>{{trackingcodevalue | json}}</pre>
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  var idnumber = trackingcodevalue;
  //alert(idnumber);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function () {
    var u = "///piwik/";
    _paq.push(['setTrackerUrl', u + 'piwik.php']);
    _paq.push(['setSiteId', idnumber]);
    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.type = 'text/javascript';
    g.async = true;
    g.defer = true;
    g.src = u + 'piwik.js';
    s.parentNode.insertBefore(g, s);
  })()
</script>
<noscript><p><img src="//sr03695/piwik/piwik.php?idsite="+idnumber style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

指令正在加载，但有一个错误，并且未加载统计信息：

角度.js：12722 引用错误：未定义跟踪代码值 at eval （eval at （jquery.js：328）， ：3：18） at Function.jQuery.extend.globalEval （jquery.js：328） at jQuery.fn.extend.domManip （jquery.js：5435） at jQuery.fn.extend.append （jquery.js：5218） 在。（jquery.js：5333） at jQuery.access （jquery.js：3491） at jQuery.fn.extend.html （jquery.js：5300） 角度.js：8728 at processQueue （angular.js：14991） 角度.js：15007

欢迎任何帮助。

尝试使用此版本。

几乎没有区别，并将逻辑移动到指令中的链接函数。

指令部分

angular
        .module('app.sandbox')
        .directive('trackingcode', trackingcode);
        function trackingcode() {
          var directive = {
              restrict: 'E',
              templateUrl: 'trackingcode.directive.html',
              scope: {
                  trackingcodevalue: '=trackingcodevalue'
              },
              link: linkFunc,
          };
          return directive;
          function linkFunc(scope, el, attr, ctrl) {
            var idnumber = scope.trackingcodevalue;
            _paq.push(["setDomains", ["*.siteUrl.com","*.siteUrl2.com"]]);
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            (function() {
            var u="//piwikurl/piwik/";
            _paq.push(['setTrackerUrl', u+'piwik.php']);
            _paq.push(['setSiteId',idnumber ]);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
            })();
          }
    }

注意 piwikurl

模板

<script type="text/javascript">
var _paq = _paq || [];
</script>

用法

<trackingcode trackingcodevalue="vm.code"></trackingcode>

我将变量的定义移_paq指令之外，因为piwik以异步方式执行.js如果您将其保留在指令内，则超出了范围。

尝试了自己并工作。

通过这种方式，您可以将大部分 js 代码保留在指令中。

希望这有帮助

One Letter Variable s使您的代码难以阅读。

同时，trackingcodevalue未在script tag outermost scope中定义。看：

<!-- Piwik -->
<script type="text/javascript">
    var _paq = _paq || [];
    var idnumber = trackingcodevalue; // THIS LINE ASUMES `trackingcodevalue` exists

请注意，angularjs 不会使您的变量在一般范围内可用。

如果您确实需要该变量，请考虑以下任一因素：

  1. 将<script>代码移动到directive
  2. 读取（并可能观察到）属性值$('trackingcode[trackingcodevalue]').attr('trackingcodevalue')
  3. 但我确实建议你更喜欢$watch（...）或更好的$observe（...）
相关文章：