我正在尝试构建一个指令来动态导入主页中的跟踪代码脚本:
<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 -->
指令正在加载,但有一个错误,并且未加载统计信息:
角度.js:12722 引用错误:未定义跟踪代码值 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) 在。(jquery.js:5333) at jQuery.access (jquery.js:3491) at jQuery.fn.extend.html (jquery.js:5300) 角度.js:8728 at processQueue (angular.js:14991) 角度.js:15007
欢迎任何帮助。
尝试使用此版本。
几乎没有区别,并将逻辑移动到指令中的链接函数。
指令部分
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 代码保留在指令中。
希望这有帮助
One Letter Variable
s使您的代码难以阅读。
同时,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(...)或更好的$observe(...)