1

I want to add some html to view from $scope variable. I want to add it inside angular-ui navbar. Generated code absolutely correct when I check it in a browser but it seems additional css style brokes everything.

My html looks like :

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

app.js is the following:

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


});

Rendered page looks as expected but dropdown menu doesn't work. When I copy not working html from browser and manually print it without ng-bind-html and remove ng-binding style everything is ok.

How force ng-bind-html just add html without adding some extra css? The other way is creating own directive as answered here but copipasted code doesn't work. Probably author of the question didn't show everything and thus I didn't include some important module, missed semicolon, made incorrect controller-directive declaration order(?) e.t.c

Could anybody tell me, how use ng-bind-html without its annoying extra css or provide correct own directive example?

Community
  • 1
  • 1

1 Answers1

0

OK, problem was that inserted HTML contains angular-specific elements and thus I have to create special directive which compiles html after insertion. Working exapmle on stackoverflow answers.

Community
  • 1
  • 1