1

我想添加一些 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？另一种方法是创建自己的指令，如此处回答，但复制的代码不起作用。问题的作者可能没有显示所有内容，因此我没有包含一些重要的模块，错过了分号，做出了不正确的控制器指令声明顺序（？）等

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

4

1 回答 1

0

好的，问题是插入的 HTML 包含特定于角度的元素，因此我必须创建在插入后编译 html 的特殊指令。 关于stackoverflow答案的工作示例。

于 2014-12-10T09:53:18.737 回答