[英]AngularJS - Styles not applying on appended html
I want to inject a html that is a result of rendering a django template. 我想注入一个渲染django模板的结果的html。 Django template: Django模板:
class CView(View):
def get(self, request):
return render_to_response('my_template.html', {},content_type="application/json")
The resulted html displays correctly when hardcoded. 在硬编码时,生成的html正确显示。 I want to inject the received html code into the a div. 我想将收到的html代码注入到div中。 The problem is that the bootstrap accordion component doesn't display. 问题是bootstrap手风琴组件不显示。 I only get the text. 我只收到文字。
code in the angular controller: 角度控制器中的代码:
$scope.myHTML = '<div>Loading..<div>';
$scope.to_trusted = function (html_code) {
return $sce.trustAsHtml(html_code);
}
dataService.getMyHtml().success(function (data) {
$timeout(function () {
$scope.$apply(function () {
$scope.myHTML = data;
})
}, 0);
}).error();
html code: HTML代码:
<div ng-bind-html="to_trusted(myHTML)"></div>
myHTML holds something like this: myHTML包含这样的内容:
<div class="col-sm-3 col-md-2 sidebar">
<accordion close-others="true">
<accordion-group>
<accordion-heading>
Items One <i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<ul class="nav nav-sidebar">
<li><a href="#/one">One 1</a></li>
<li><a href="#/two">One 2</a></li>
</ul>
</accordion-group>
<accordion-group>
<accordion-heading>
Items Two <i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<ul class="nav nav-sidebar">
<li><a href="#/one">Two 1</a></li>
<li><a href="#/two">Two 2</a></li>
</ul>
</accordion-group>
</accordion>
</div>
The above code just renders as a vertical list menu, but no accordion. 上面的代码只是呈现为垂直列表菜单,但没有手风琴。 The same code renders fine if loaded as a static html file. 如果作为静态html文件加载,相同的代码呈现正常。 I am using angular's bootstrap . 我正在使用角度的引导程序 。
There are two possible answers to this problem: 这个问题有两种可能的答案:
[ 1 ] If your dataService.getHtml() is actually requesting data from the server from a url which returns an html, and it is not manipulating the html itself in the service, then you can safely use the ng-include
directive: [ 1 ]如果你的dataService.getHtml()实际上是从一个返回html的url请求来自服务器的数据,并且它没有在服务中操纵html本身,那么你可以安全地使用ng-include
指令:
<div ng-include="'http://somewhere/mytemplate.html'"></div>
If this is the case, then you don't need to actually use the $compile
service and manually add it in the html. 如果是这种情况,那么您不需要实际使用$compile
服务并在html中手动添加它。
[ 2 ] If your dataService does not require a request from the server and is building an html content inside the service itself, then you need to use the $compile
service. [ 2 ]如果您的dataService不需要来自服务器的请求并且正在服务本身内构建html内容,那么您需要使用$compile
服务。 To do this, you need to create a directive that compiles the html content and manually add the html itself. 为此,您需要创建一个编译html内容的指令并手动添加html本身。
HTML HTML
<div compile-html="html"></div>
JAVASCRIPT JAVASCRIPT
.service('dataService', function($http, $q) {
this.getHtml = function() {
var deferred = $q.defer();
$http.get('accordion.tpls')
.success(function(template) {
deferred.resolve(template + '<h1>Added another html in here</h1>');
}, deferred.reject);
return deferred.promise;
};
})
.controller('Ctrl', function($scope, dataService) {
dataService.getHtml().then(function(template) {
$scope.html = template;
});
})
.directive('compileHtml', function($compile) {
return function(scope, elem, attr) {
scope.$watch(attr.compileHtml, function(value) {
if(value) {
elem.html(value);
$compile(elem.contents())(scope);
}
});
}
});
你必须在angular中使用$ compile函数才能识别注入的html代码中的指令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.