3
我想通過angular(HTML,CSS,JS)加載動態內容。我正在使用指令來動態加載HTML。以角度動態加載js腳本或js代碼
app.directive("bindCompiledHtml", function($compile, $timeout) {
return {
template: '<div></div>',
scope: {
rawHtml: '=bindCompiledHtml'
},
link: function(scope, elem, attrs) {
scope.$watch('rawHtml', function(value) {
if (!value) return;
// we want to use the scope OUTSIDE of this directive
// (which itself is an isolate scope).
var newElem = $compile(value)(scope.$parent);
elem.contents().remove();
elem.append(newElem);
});
}
};
});
<div bind-compiled-html="content"></div>
如果內容只包含HTML,那麼它會成功呈現它,但是如果它包含CSS/Script則不是。
上面的指令不會呈現下面的代碼。
'<link rel="stylesheet" href="/static/engine/css/jquery.bxslider.less"><script src="/static/engine/js/jquery.bxslider.js"></script><style></style><script type="text/javascript">function mytest(){$(\'.bxslider\').bxSlider(); }</script><ul class="bxslider"><li ng-repeat=\'brainfact in brainfacts\'><img src="{$ brainfact.content[\'image\'] $}" /></li></ul>'
將使這下面的代碼:
'<ul class="bxslider"><li ng-repeat=\'brainfact in brainfacts\'><img src="{$ brainfact.content[\'image\'] $}" /></li></ul>'
演示plunker - http://plnkr.co/edit/QG5IbaNfhNDrIyRbXEGx?p=preview
什麼是用例?因爲在我看來,這是一個糟糕的設計...... – deostroll
@deostroll [here](http://stackoverflow.com/questions/30521546/made-angular-scope-available-in-django-templateresponse?noredirect=1 #comment49117361_30521546)是我正在嘗試完成的完整流程 – saf