AngularJS重新加载指令模板
问题描述:
我正在写一个AngularJS指令来显示twitter共享按钮,每次更改属性后我需要重新加载和编译指令模板,因为在调用twttr.widgets.load后,内容将被替换为iframe包含按钮。AngularJS重新加载指令模板
function TwitterShareDirective($twitterRender, debounce, $compile) {
function template() {
var element = document.createElement('a');
element.href = 'https://twitter.com/share';
element.setAttribute('class', 'twitter-share-button');
element.setAttribute('data-url', '{{href}}');
element.setAttribute('data-text', '{{text}}');
element.setAttribute('data-via', '{{via}}');
element.setAttribute('data-size', '{{size}}');
element.setAttribute('data-related', '{{related}}');
element.setAttribute('data-hashtags', '{{hashtags}}');
element.setAttribute('data-lang', '{{lang}}');
return element;
}
return {
restrict: 'E',
template: template(),
scope: {
'href': '@url',
'size': '@size',
'text': '@text',
'via': '@via',
'related': '@related',
'hashtags': '@hashtags',
},
link: function (scope, element, attr) {
scope.lang = $twitterRender.getLang();
var render = function() {
var dom = template();
element.empty();
element.append(dom);
$compile(dom)(scope);
scope.$apply();
$twitterRender.render(element[0]);
};
var debouncedRender = debounce(render, 800);
attr.$observe('url', function() { debouncedRender(); });
attr.$observe('size', function() { debouncedRender(); });
attr.$observe('text', function() { debouncedRender(); });
attr.$observe('via', function() { debouncedRender(); });
attr.$observe('related', function() { debouncedRender(); });
attr.$observe('hashtags', function() { debouncedRender(); });
}
};
}
编辑:问题解决
我上的使用从@irth和范围的解决问题$适用(),使魔术
答
尝试这样的事情在你的渲染功能:
var domElement = document.createElement(newVal);
element.empty();
element.append(domElement);
$compile(domElement)(scope);
如果不这样做的伎俩开箱,请看看我是如何做到在这里:https://github.com/irthos/ecopos4/blob/master/app/directives/helper.js
答
尝试包成一个ng-if
指令。
<div ng-if="doRender">
<!-- content -->
</div>
// In directive whenever you need a reload
$scope.doRender = false;
// Postpone to end of digest queue
$timeout(function() {
$scope.doRender = true;
});
+0
添加$超时不起作用,除非我添加一些时间到$超时。像这样 - '$ timeout(function(){ $ scope.doRender = true; },500);'有什么方法可以避免时间增加到$ timeout。 – Anita
答
在你的渲染函数调用$ compile如下:
var render = function() {
//Here I want to replace contents with new compiled template;
$compile(element)(scope);
twttr.widgets.load(element[0]);
};
我尝试你的解决方案,但它会呈现一个未编译的html的twitter按钮(但是$ compile返回的函数的输出返回一个已编译的html, – DocLM