Creating elements Dynamically in Angular

Question

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 compoments 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>

Answer 1

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

Answer 2

This is both really simple, but some what complex if you don't know where to start - I really recommend looking at the Tutorial, and following it end to end: http://docs.angularjs.org/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

Answer 3

A few things come 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 complex 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 $compile). But from what you said in the question I think a directive would be to complicate things needlessly.

Answer 4

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

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

Answer 5

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