-Tracking-Code-Skript in Richtlinie

Question

Ich versuche, eine Richtlinie zu bauen dynamisch den Tracking-Code-Skripte in meiner Haupt-Seite zu importieren:

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

die Richtlinie:

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

und die Vorlage:

Die Anweisung wird geladen, aber es gibt einen Fehler und die Statistik wird nicht geladen:

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

jede Hilfe ist willkommen.

Answer 1

Versuchen Sie mit dieser Version.

Ist wenig differrent und verschieben Sie die Logik auf die Link-Funktion in der Direktive.

Die Richtlinie Teil

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

Aufmerksamkeit Pay

Die Vorlage

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

Die Nutzung

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

zog ich die Definition von _paq Variable OUTSI piwikurl de Die Direktive cause wird async von piwik.js ausgeführt und wenn Sie sie innerhalb der Direktive behalten, ist sie außerhalb des gültigen Bereichs.

Ich habe mich selbst versucht und funktioniert.

Auf diese Weise können Sie den größten Teil des js-Codes innerhalb der Direktive behalten.

hoffe, das hilft

Answer 2

One Letter Variable s machte Ihren Code schwer zu lesen.

In der Zwischenzeit ist trackingcodevalue nicht in der outermost scope Ihrer script tag definiert. Siehe:

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

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

Beachten Sie, dass AngularJS nicht Ihre Variable im allgemeinen Umfang zur Verfügung stellen.

Wenn Sie wirklich diese Variable benötigen, denken Sie an entweder:

1. Bewegen Sie den <script> Code in directive
2. lesen (und beobachten sein kann) Attributwert $('trackingcode[trackingcodevalue]').attr('trackingcodevalue')
3. Aber ich Rat, den Sie bevorzugen $watch(...) oder besser $observe(...)