Tracking код сценария в директиве

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

Попробуйте использовать эту версию.

Немного отличается и переводит логику в функцию связи в директиве.

директива часть

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 переменной outsid e причина директивы выполняется асинхронным способом piwik.js, и если вы храните ее внутри директивы, она выходит за рамки.

Пробовал себя и работал.

Таким образом, вы можете хранить большую часть кода js внутри директивы.

Надеется, что это помогает

Answer 2

One Letter Variable s ваш код трудно читать.

Между тем trackingcodevalue не определен в outermost scope вашего script tag. См.:

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

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

Обратите внимание, что angularjs не сделает вашу переменную доступной в общем объеме.

Если вам действительно нужна эта переменная, думать как:

1. Перемещение <script> код в directive
2. Read (и может быть наблюдать) значение атрибута $('trackingcode[trackingcodevalue]').attr('trackingcodevalue')
3. Но я советую вам предпочесть $watch(...) или выше $observe(...)