javascript - ng-bind-html 添加了拥有的 css 类 'ng-binding'，它破坏了所有嵌套的 css，如何摆脱它？

Question

我想添加一些 html 以从 $scope 变量查看。我想将它添加到 angular-ui 导航栏中。当我在浏览器中检查时，生成的代码绝对正确，但似乎额外的 css 样式破坏了一切。

我的 html 看起来像:

... navbar headers
<ul class="nav navbar-nav" ng-bind-html="menuHTML"></ul>

app.js 如下:

var myApp = angular.module('myApp', ['ui.bootstrap','ngSanitize']);



myApp.controller('NavBarCtrl', function($scope, $http, $window,$sce) {

    $scope.isCollapsed = true;

    $scope.changeLanguage = function (language){
        console.log(language);
        var url = $window.location.href;
        if (url.indexOf('?') > -1){
            url = url.substr(0,url.indexOf("?"));
            url += '?language='+language;
        }else{
            url += '?language='+language;
        }
        $window.location.replace(url);
    };

    $http.get('headerMenu').success(function(res){
        console.log('header ok');
        $scope.headerMenuHTML =  $sce.trustAsHtml(res);
    });


});

呈现的页面看起来像预期的那样，但下拉菜单不起作用。 当我从浏览器复制无效的 html 并在没有 ng-bind-html 的情况下手动打印它并删除 ng-binding 样式时一切正常。

如何强制 ng-bind-html 只添加 html 而不添加一些额外的 css？另一种方法是创建自己的指令作为 answered here但copipasted 代码不起作用。可能问题的作者没有显示所有内容，因此我没有包含一些重要的模块，错过了分号，做出了不正确的 Controller 指令声明顺序(？)e.t.c

谁能告诉我，如何使用 ng-bind-html 而不使用烦人的额外 CSS 或提供正确的指令示例？

Answer 1

好的，问题是插入的 HTML 包含 Angular 特定的元素，因此我必须创建特殊指令，在插入后编译 html。 Working exapmle 关于 stackoverflow 的回答。