AngularJS - 样式不适用于附加的html

我想注入一个html，这是渲染Django模板的结果。 Django模板：AngularJS - 样式不适用于附加的html

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

当硬编码时，生成的html正确显示。我想将接收到的html代码注入到div中。问题在于自举手风琴部件不显示。我只拿到文字。

代码在角控制器：

$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代码：

<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的bootstrap。

来源

2014-09-24 AlexandruC

有两个可能的回答这个问题：

DEMO

[如果您dataService.getHtml（）实际上是从它返回一个HTML的URL服务器请求数据，并且它不是在服务中操作html本身，那么您可以安全地使用ng-include指令：

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

如果是这种情况，那么您不需要实际使用$compile服务并手动将其添加到html中。

[如果DataService没有要求从服务器请求和正在建设的服务本身内部的HTML内容，那么你需要使用$compile服务。为此，您需要创建一个编译html内容的指令，并手动添加html本身。

HTML

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

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

来源

2014-09-24 16:49:23 ryeballar

您必须使用角度的$ compile函数来识别注入的html代码中的指令。

来源

2014-09-24 16:28:14

AngularJS - 样式不适用于附加的html

回答

相关问题