Creating Elements Dynamically in Angular

Question

I have very little experience with javascript. I need to add a menu by clicking an item. We were asked to create it from scratch without using any library, such as bootstrap linkers or jQuery.

We use Angularjs. In angular, I want to know the correct method for creating new elements. Something like that we did not do document.createElement .

I am adding some of the code for you guys to better understand 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 the 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 that the action of the Process-IDC menu is an array, it will contain more menus with actions in it, and it should be open in the submenu.

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

A few things come to mind. First of all, are you sure you need to create an item when clicked? If you do to show a fixed element on click, the best approach would be to create the element as usual, but not show it until you click. Sort of:

 <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 could add a few elements, and you don't know how many, you should see how to use repeat and click elements in the list. Something like that:

 <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 text “Add Element” here will create another div with the text “This is Sparta”. You can click as a complex element the way you want, and you can click an element directly from the scope, so you do not need to define it in a template.

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

---

If none of these options work because it is a truly dynamic object, then I would start using the directive for it, as others have suggested (also look at the $ compilation). But from what you said in this matter, I think the directive will be to complicate things unnecessarily.

Answer 2

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

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

Answer 3

It is very simple, but it’s kind of complicated if you don’t know where to start - I really recommend looking at the tutorial and following it to the end: http://docs.angularjs.org/tutorial/ - so you will get acquainted with all the concepts around Angular to help you understand the technical terms used to describe the solution.

If you create whole new menu items, if in your controller your menu looks something like this:

 // 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 switch the display of an element that might be hidden, you can use ng-if or ng-show

Answer 4

Assuming you do this in a directive and you have an angular dom element , you can do

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

Answer 5

We can use $ scope in the App Controller to create div elements, and then we can add other div elements to it. Here is 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); 

To illustrate this, each book has some attributes (name, category, price and author), and book1 is the most external Div element and has attributes as internal Div elements.

The created HTML element will be something like this