指令中的跟踪代码脚本

Question

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

<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 -->

指令正在加载，但出现一个错误，统计数据未加载：

angular.js:12722 ReferenceError: trackingcodevalue is not defined 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) at . (jquery.js:5333) at jQuery.access (jquery.js:3491) at jQuery.fn.extend.html (jquery.js:5300) at angular.js:8728 at processQueue (angular.js:14991) at angular.js:15007

欢迎任何帮助。

Answer 1

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

同时 trackingcodevalue 未在您的 script tag 的 outermost scope 中定义。参见：

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

    var idnumber = trackingcodevalue; // THIS LINE ASUMES `trackingcodevalue` exists

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

如果你真的需要那个变量，考虑一下：

将<script>代码移动到directive
读取（并可能观察到）属性值 $('trackingcode[trackingcodevalue]').attr('trackingcodevalue')
但我建议你更喜欢$watch(...) or better $observe(...)

Answer 2

试试这个版本。

差别不大，将逻辑移至指令中的 link 函数。

指令部分

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代码保留在指令中。

希望对您有所帮助

指令中的跟踪代码脚本

Tracking code script in directive

html

javascript

matomo

angularjs

angularjs-directive