6

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>
Improve this question
6
  • look at this docs.angularjs.org/api/ng.directive:ngShow With this method, you don't really create an element, but only show it when needed 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. 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. 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. 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. Commented Nov 11, 2013 at 13:53

5 Answers 5

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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

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

Improve this answer

Comments

4

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

Improve this answer

4 Comments

Thanks I have already accomplished What you have given. I need to add dropdown menu on runtime if needed. I have shared code for what is already done. Please take another look at it.
Ah, you edited the question as I was typing so didn't see that ;o) Something like: $scope.click = function (menu) { if (typeof (menu.action) == 'string') { $scope.tabSelected(menu); } elseif( typeof (menu.action) == 'array') ){ $scope.subMenu = menu.action } } And then inside the first loop, add an 'ng-repeate="subitem in subMenu" perhaps. - It's little hacky, and won't work beyond one level though so you'll need to work on it.
Thats what I wanna know a non hacky way to make a multi level menu.
Better might be, create a custom directive that nests recursively: So, <myMenu value="menuData"></myMenu> could include in it's template another call to itself and work at any depth.
2

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>");
Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.