I have very little javascript experience. I need to add a menu on click of an item. We have been asked to build it from scratch without using any library like bootstrap poments or JQuery.

We are using Angularjs. In angular I want to know the correct method to create new elements. Something like what we did not document.createElement.

I am adding some of the code for you guys to have a better idea what I want to do.

Menu Directive

.directive('menu', ["$location","menuData", function factory(location, menuData) {
    return {
        templateUrl: "partials/menu.html",
        controller: function ($scope, $location, $document) {
            $scope.init = function (menu) {
                console.log("init() called");
                console.log("$document: " + $document);

                if (menu.selected) {
                    $scope.tabSelected(menu);
                }
            }
            $scope.creteMenu = function(menuContent){
                //This is to be called when the action is an array.
            }
            $scope.tabSelected = function(menu){
                $location.url(menu.action);
                $scope.selected = menu;
            }
            $scope.click = function (menu) {
                if (typeof (menu.action) == 'string') {
                    $scope.tabSelected(menu);
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.menuData = menuData;
        }
    };
}])

Menu data in service.

.value('menuData', [{ label: 'Process-IDC', action: [] }, { label: 'Dash Board', action: '/dashboard', selected: true }, { label: 'All Jobs', action: '/alljobs', selected: false }, { label: 'My Jobs', action: '/myjobs', selected: false }, { label: 'Admin', action: '/admin', selected: false }, { label: 'Reports', action: '/reports', selected: false }]);

If you notice the action of Process-IDC menu is an array it will contain more menu with actions in it and it should be opened in a sub menu.

Menu.html (partial)

<ul class="menu">
    <li ng-class="{activeMenu: menu==selected}" ng-init="init(menu)" data-ng-click="click(menu)" data-ng-repeat="menu in menuData">{{menu.label}}</li>
</ul>

I have very little javascript experience. I need to add a menu on click of an item. We have been asked to build it from scratch without using any library like bootstrap poments or JQuery.

We are using Angularjs. In angular I want to know the correct method to create new elements. Something like what we did not document.createElement.

I am adding some of the code for you guys to have a better idea what I want to do.

Menu Directive

.directive('menu', ["$location","menuData", function factory(location, menuData) {
    return {
        templateUrl: "partials/menu.html",
        controller: function ($scope, $location, $document) {
            $scope.init = function (menu) {
                console.log("init() called");
                console.log("$document: " + $document);

                if (menu.selected) {
                    $scope.tabSelected(menu);
                }
            }
            $scope.creteMenu = function(menuContent){
                //This is to be called when the action is an array.
            }
            $scope.tabSelected = function(menu){
                $location.url(menu.action);
                $scope.selected = menu;
            }
            $scope.click = function (menu) {
                if (typeof (menu.action) == 'string') {
                    $scope.tabSelected(menu);
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.menuData = menuData;
        }
    };
}])

Menu data in service.

.value('menuData', [{ label: 'Process-IDC', action: [] }, { label: 'Dash Board', action: '/dashboard', selected: true }, { label: 'All Jobs', action: '/alljobs', selected: false }, { label: 'My Jobs', action: '/myjobs', selected: false }, { label: 'Admin', action: '/admin', selected: false }, { label: 'Reports', action: '/reports', selected: false }]);

If you notice the action of Process-IDC menu is an array it will contain more menu with actions in it and it should be opened in a sub menu.

Menu.html (partial)

<ul class="menu">
    <li ng-class="{activeMenu: menu==selected}" ng-init="init(menu)" data-ng-click="click(menu)" data-ng-repeat="menu in menuData">{{menu.label}}</li>
</ul>

• javascript
• angularjs

• look at this docs.angularjs/api/ng.directive:ngShow With this method, you don't really create an element, but only show it when needed – Deblaton Jean-Philippe Commented Nov 11, 2013 at 13:39
• Better try to understand how angular works. How its templating engine works. How things are model driver rather than UI driven. Look at things like ng-repeat, ng-include to understand how dynamic content gets generated. – Chandermani Commented Nov 11, 2013 at 13:44
• 1 angular is very powerful...but with no javascript experience, particularly understanding objects and scope it is not well suited for javascript beginners. – charlietfl Commented Nov 11, 2013 at 13:44
• ng-show n ng-hide will not work as menu options and even structure is not fixed. I have created a directive which creates the menu based on the data received from service and handle the click. now i need to add the option of a drop down menu. I want to create it at runtime when needed and populate it with data which i already have. – chandings Commented Nov 11, 2013 at 13:44
• @charlietfl I do not have the luxury of choosing my development platform at the moment. I got to learn as I do. I am here to make sure I do not do anything obviously wrong. I can get This working in plain javascript but it will be a very dirty code. – chandings Commented Nov 11, 2013 at 13:53

5 Answers 5

A few things e to mind. First of all, are you sure you need to actually create the element on click? If you are doing to to show a fixed element on click then the better approach would be to generate the element as normal, but not show it until you click. Something like:

<div ng-click="show_it=true">Show item</div>
<div ng-show="show_it">Hidden until the click. Can contain {{dynamic}} content as normal.</div>

If you need it to be dynamic because you might add several elements, and you don't know how many, you should look at using a repeat and pushing elements into a list. Something like this:

<div ng-click="array_of_items.push({'country': 'Sparta'})">Add item</div>
<div ng-repeat="item in array_of_items"> This is {{item.country}}</div>

Each click of the "Add item" text here will create another div with the text "This is Sparta". You can push as plex an item as you want, and you could push an item directly from the scope so you don't have to define it in the template.

<div ng-click="functionInControllerThatPushesToArray()">Add item</div>
<div ng-repeat="item in array_of_items"> This is {{item.country}}</div>

If neither of those options would work because it is a truly dynamic object, then I would start looking at using a directive for it like others have suggested (also look at $pile). But from what you said in the question I think a directive would be to plicate things needlessly.

I remend you read the ngDirective and the angular.element docs.

Hint: angular.element has an append() method.

This is both really simple, but some what plex if you don't know where to start - I really remend looking at the Tutorial, and following it end to end: http://docs.angularjs/tutorial/ - As that will introduce you to all the concepts around Angular which will help you understand the technical terms used to describe the solution.

If you're creating whole new menu items, if in your controller your menu is something like:

// An Array of Menu Items
$scope.menuItems = [{name: 'Item One',link: '/one'},{name: 'Item Two',link:'/two'}]; 

// Add a new link to the Array
$scope.addMenuItem = function(theName,theLink){
    $scope.menuItems.push({name: theName,link:theLink}); 
}

And in the template, use the array inside ng-repeat to create the menu:

<ul>
  <li ng-repeat="menuItem in menuItems">{{menuItem.name}}</li>
</ul>

If you just want to toggle the display of an item that might be hidden, you can use ng-if or ng-show

Assuming that you are doing it in a directive and you have angular dom element, you can do

element.append("<div>Your child element html </div>");

We can use $scope in App Controller to create Div Elements and then we can append other Div elements into it similarly. Here's an Example:

 $scope.div = document.createElement("div");
      $scope.div.id = "book1";
      $scope.div.class = "book_product";

      //<div id="book1_name" class="name"> </div>
      $scope.name = document.createElement("div");
      $scope.name.id = "book1_name";
      $scope.name.class= "name";
      // $scope.name.data="twilight";
      $scope.name.data = $scope.book.name;
      $scope.div.append($scope.name);

      console.log($scope.name);

      //<div id="book1_category" class="name"> </div>
      $scope.category = document.createElement("div");
      $scope.category.id = "book1_category";
      $scope.category.class= "category";
      // $scope.category.data="Movies";
      $scope.category.data=$scope.book.category;
      $scope.div.append($scope.category);

      console.log("book1 category = " + $scope.category.data);
      //<div id="book1_price" class="price"> </div>
      $scope.price = document.createElement("div");
      $scope.price.id = "book1_price";
      $scope.price.class= "price";
      // $scope.price.data=38;
      $scope.price.data=$scope.book.price;
      $scope.div.append($scope.price);

      console.log("book1 price = " + $scope.price.data);

      //<div id="book1_author" class="author"> </div>
      $scope.author = document.createElement("div");
      $scope.author.id = "book1_author";
      $scope.author.class= "author";
      // $scope.author.data="mr.book1 author";
      $scope.author.data=$scope.book.author;
      $scope.div.append($scope.author);    

      console.log("book1 author = " + $scope.author.data);  

      //adding the most outer Div to document body.
      angular.element(document.getElementsByTagName('body')).append($scope.div);

For more illustration, Here each book has some attributes (name, category, price and author) and book1 is the most outer Div Element and has it's attributes as inner Div elements.

Created HTML element will be something like that