1

I am trying to create top bar navigation menu in angular js. It has drop down menu list that is dynamic. That I am getting the menu from DB. So I am making call to DB from controller and fetching data there and forming dynamic list with css properties there. below is code in controller file:

  .controller('NavController',['$scope','$http','$sce',function($scope,$http,$sce)        {    
$http.get('service/getnavitem.do').then(function(response){
//here i am doing some looping and forming list with returned data
//lets suppose final list formed after looping through data is
$scope.navlist="<li><a href='#'>item1</a><ul class='menu'>
<li><a href='#'>Item2"</a></li></ul></li>";});}]);


  //View code: Navigation.html

<div ng-controller='NavController'>
<ul class="dropdown menu navigation" dropdown-menu>
   <li>
        <a href="#">Root Item>< /a>
       <ul class="menu" id="navmenu" ng-html-bind="navlist" ></ul>
   </li>
</ul>
</div>

//app.js code`enter code here`

var mainapp=angular.module("myApp",['mm.foundation','ngSanitize'])
.directive('navmenu',function(){return{
    restrict:'A',
    replace:true,
    controller:'NavController',
    templateUrl:'app/view/Navigation.html'
}
  });

My problem is top list is getting created and css is applied. Css is not getting applied to the list that is dynamically generated from controller .

$scope.navlist="<li><a href='#'>item1</a>
<ul class='menu'><li><a href='#'>Item2"</a></li></ul></li>"

Here I have mentioned class='menu' , but its not working.

When I am directly writing this piece of code in view, its working, but problem is that I want it dynamic. Can anyone help. i am new to Angular js , need helping hand to start with. Thanks a lot in advance. I am using angular foundation for navigation menu.I have included angular-sanitize.js for ng-html-bing tag.

AAT
  • 411
  • 7
  • 16
user3505997
  • 11
  • 4
  • Try adding the following line $scope.navlist=$sce.trustAsHtml($scope.navlist) after $scope.navlist="
  • item1
    • ";});}]); – Vivz Jul 28 '17 at 13:04
  • apology from my side ,typo here in actual code its ng-bind-html only and there is no > after root item.we will have to check why dynamic code generated from controller is not taking CSS property. – user3505997 Jul 28 '17 at 13:07
  • Hi Vivz..already tried that, no luck..item2 is coming but without CSS applied :( i have included CSS stylesheet in index.html , – user3505997 Jul 28 '17 at 13:11
  • any body there to help – user3505997 Jul 29 '17 at 07:20
  • @kindly update running snippet. – Dhaarani Jul 31 '17 at 12:03