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 在eval（eval at（jquery.js：328），：3：18）在Function.jQuery.extend.globalEval（jquery.js：328）在jQuery.fn.extend.domManip（jquery.js：5435）在jQuery.fn.extend.append（jquery.js：5218）在。（的jquery.js：5333）在jQuery.access（jquery.js：3491）在jQuery.fn.extend.html（jquery.js：5300）在angular.js：8728 at processQueue（angular.js：14991） at angular.js：15007

欢迎任何帮助。

Answer 1

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

同时，trackingcodevalue的{{1}}中未定义outermost scope。参见：

script tag

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

如果您确实需要该变量，请考虑以下两种情况：

将 <script type="text/javascript"> var _paq = _paq || []; var idnumber = trackingcodevalue; // THIS LINE ASUMES `trackingcodevalue` exists代码移至<script>
读取（并且可以观察）属性值directive
但我建议您更喜欢$watch(...)或更好$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代码的大部分内容保留在指令中。

希望这有帮助

在指令

2 个答案: