Tracking code script in directive

Question

I'm trying to build a directive to dynamically import the tracking code scripts in my main page:

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

the directive:

(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);

and the template:

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

The directive is loading but there is one error and the statistic is not loaded:

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

any help is welcome.

Answer 1

Try with this version.

Is little differrent and move the logic to the link function in the directive.

The directive part

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);
            })();
          }
    }

Pay attention to piwikurl

The template

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

The usage

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

I moved the definition of _paq variable outside the directive cause is execute in async way by piwik.js and if you keep it inside the directive is out of scope.

Tryed myself and works.

In this way you can keep the most part of the js code inside the directive.

Hope this helps