AngularJS append html to dom element

Question

Im working on a small web app, and there is a side menu that has nav links in it. Each link when clicked pulls out a hidden panel and should display a list of items specific to that link.

I have most of the functionality working except Im stuck on how to append either a templateURL or just html to the panel.

Any guidance would be great.

heres what I have so far: html

<!-- Pullout menu -->
 <nav id="sidebar-pullout">
   <div id="menu-list"></div>
</nav>

app.js

var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])

.config(function($routeProvider){
   $routeProvider..when('/organizations', {
        templateUrl: 'templates/dashboard/organizations/organizations-title.html',
        controller: 'OrganizationController',
        activetab: 'organizations'
    })
      .otherwise( {redirectTo: '/dashboard'} );
  });

// Side Nav Link Controllers
   configApp.controller('OrganizationController', function($scope) {});
   configApp.controller('SideNavCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  }
 });

 // adding html to the menu-list
 configApp.directive('menu-list', function(){
  return {
    template: '<span ng-transclude >append som html here</span>',
    replace: true,
    transclude: true,
    controller: 'OrganizationController'
  };
 });

Answer 1

Here is another way you might be able to go about it. By keeping a reference to menu items and contents. You could keep the side panel content in separate HTML files.

configApp.directive('menuList', function() {
  return {
    restrict: 'EA',
    link: function(scope, el, attr) {

        var activeId = null;

        scope.showContent = function(id) {
            activeId = id;
        };

        scope.isActive = function(id) {
            return activeId === id;
        }

        scope.menuItems = [{
            id: 'item1',
            name: 'Menu Item 1',
            content: 'path/to/menuItem1content.html'
        }, {
            id: 'item2',
            name: 'Menu Item 2',
            content: 'path/to/menuItem2content.html'
        }]
    }
  };
}); 

Then in you HTML maybe something like this.

<div menuList>
  <nav id="sidebar-menu">
    <ul>
        <li ng-repeat="item in menuItems">
            <a ng-click="showContent(item.id)">{{ item.name }}</a>
        </li>
    </ul>
  </nav>

  <div id="sidebar-content">
    <div class="content"
         ng-repeat="item in menuItems"
         ng-include="item.content"
         ng-show="isActive(item.id)"></div>
  </div> 
</div>

This is just an idea and you could use angular animation to animate the sidebar sliding and stuff.

Answer 2

You are specifying your ng-transclude directive on the wrong element. You are placing it on your span tag. Try something like this instead:

<div>
  <span>/*My template html here*/</span>
  <div ng-transclude></div>
</div>

It also looks like you're specifying your directive incorrectly. Try this:

configApp.directive('menuList', function () {
  return {
    restrict: 'A',    
    replace: true, // note: this syntax will soon be deprecated
    template: '<see above snippet>'
  };
});

In particular, notice restrict , which specifies how this directive will be used (A: attribute on html element, E: as an element itself, C: as a class). Here we are saying we want to use our directive as an element, E . Also, note that I used the name menuList instead of menu-list . AngularJS uses camel-case in directive definition, and maps the directive names found in the html into their camel case counterparts. So, in the html we will still use this directive like this: menu-list , but we will declare it using camel-case. Hope this helps!