Я хочу добавить 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 или предоставить правильный пример собственной директивы?
