Jquery AngularJS-样式不应用于附加的html

我想注入一个html，它是呈现django模板的结果。 Django模板：

class CView(View):
    def get(self, request):
        return render_to_response('my_template.html', {},content_type="application/json")

硬编码时，生成的html将正确显示。 我想将收到的html代码注入到a div中。问题是引导程序accordion组件不显示。我只收到文本

角度控制器中的代码：

$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();

$scope.myHTML='Loading..'；
$scope.to_trusted=函数（html_代码）{
返回$sce.trustAsHtml（html_代码）；
}
dataService.getMyHtml（）.success（函数（数据）{
$timeout（函数（）{
$scope.$apply（函数（）{
$scope.myHTML=数据；
})
}, 0);
}).error（）；

html代码：

 <div ng-bind-html="to_trusted(myHTML)"></div>

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>

上面的代码只是呈现为垂直列表菜单，但没有手风琴。如果加载为静态html文件，则相同的代码可以很好地呈现。

---

我使用的是angular。

您必须在angular中使用$compile函数，它才能识别注入的html代码中的指令。

此问题有两种可能的答案：

[1]如果您的dataService.getHtml（）实际上是从返回html的url向服务器请求数据，并且它没有在服务中操作html本身，那么您可以安全地使用

ng include

指令：

<div ng-include="'http://somewhere/mytemplate.html'"></div>

JAVASCRIPT

.service（'dataService'，函数（$http，$q）{
this.getHtml=function（）{
var deferred=$q.deferred（）；
$http.get（'accordion.tpls'）
.成功（功能（模板）{
deferred.resolve（模板+‘在这里添加了另一个html’）；
}，延期。拒绝）；
回报。承诺；
};
})
.controller（'Ctrl'，函数（$scope，dataService）{
dataService.getHtml（）.then（函数（模板）{
$scope.html=模板；
});
})
.directive（'compileHtml'，函数（$compile）{
返回函数（范围、元素、属性）{
作用域$watch（attr.compileHtml，函数（值）{
如果（值）{
html（值）；
$compile（elem.contents（））（范围）；
}
});
}
});

<div compile-html="html"></div>

  .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);
        }
      });
    }
  });