我在指令 html 模板中有这个小部件代码。
<script type="text/javascript">
_hcwp = window._hcwp || [];
_hcwp.push({widget:"Stream", widget_id:10862, xid:{{_id}});
(function() {
if("HC_LOAD_INIT" in window)return;
HC_LOAD_INIT = true;
var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/10862/"+lang+"/widget.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hcc, s.nextSibling);
})();
此模板内有一个变量 {{_id}}。
但是当 Angular 渲染此模板时，变量不会发送到模板内。
在某些时候必须在寺庙内发送一个变量进行渲染？
我的指令:
app.directive('hyperComments', function($timeout) {
return {
restrict: 'E',
templateUrl: './templates/hc.html',
replace: true,
scope: {
xid: '='
},
link: function(scope, element, attrs) {
console.log('hello!');
$timeout(function() {
_hcwp = window._hcwp || [];
_hcwp[0]= { widget:"Stream", widget_id: 28172, xid: 31241123};
// HC.widget("Stream", _hcwp);
(function() {
// if("HC_LOAD_INIT" in window)return;
// var HC_LOAD_INIT = true;
console.log('in');
var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/9345/"+lang+"/widget.js";
var s = document.getElementsByTagName("script")[0];
console.log(s);
s.parentNode.insertBefore(hcc, s.nextSibling);
})();
}, 10000);
}
};
});
模板:
由 HyperComments 提供支持的评论
最佳答案
字符串中存在不匹配的括号
_hcwp.push({widget:"Stream", widget_id:10862, xid:{{_id}});
无论如何，它在语法上不正确并且会抛出错误，Angular 不会解析 <script> 的内容.
此外，Angular 无法处理 <script>模板中的标记(安全问题或 jqlite 实现的过度简化)，所以
app.directive('sample', function () {
return {
scope: {},
controller: function ($scope, $window) {
$scope.bar = 'test';
$window.foo = $scope.bar
},
link: function (scope, element, attrs, ctrl) {
var scriptInane = element.find("script")[0];
var script = document.createElement("script");
script.innerHTML = scriptInane.innerHTML;
scriptInane.parentNode.replaceChild(script, scriptInane);
},
template: '<h1>test</h1><script>console.log(foo); alert(foo);<\/script>'
};
});
添加angular.forEach支持多个脚本。如果您加载了 jQuery，则可以以更简洁的方式执行相同的操作。
或者你可以在前面加上 <script>与另一个(因为 DOM 已经一团糟)你指定全局变量，所以你可以跳过 $window.foo =部分。
无论如何，这似乎是另一种“不要在家尝试”的做法，可能有更好的方法来嵌入这个小部件。
关于javascript - Angularjs。在标签 <script> 中的 html 模板内发送变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29587054/