Создание элементов динамически в угловом

Question

У меня очень мало опыта работы с javascript. Мне нужно добавить меню по щелчку элемента. Нам было предложено создать его с нуля без использования какой-либо библиотеки, например, компонент bootstrap или JQuery.

Мы используем Angularjs. В угловой я хочу знать правильный метод создания новых элементов. Что-то вроде того, что мы не сделали document.createElement.

Я добавляю некоторые из кода для вас, ребята, чтобы лучше понять, что я хочу делать.

Директива Меню

.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; 
     } 
    }; 
}]) 

Меню данных в службе.

.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 }]); 

Если вы заметили действие меню Process-МЦД массив будет содержать больше меню с действиями в нем, и он должен быть открыт в подменю.

menu.html (частичные)

<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

несколько вещей приходят на ум. Прежде всего, вы уверены, что вам нужно создать элемент при нажатии? Если вы делаете, чтобы показать фиксированный элемент при щелчке, лучшим подходом было бы создание элемента как обычно, но не показывать его до щелчка. Что-то вроде:

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

Если вам это нужно, чтобы быть динамичными, потому что вы можете добавить несколько элементов, и вы не знаете, сколько вы должны смотреть на использование повторения и толкая элементы в список. Что-то вроде этого:

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

Каждый щелчок текста «Добавить элемент» здесь будет создать еще один DIV с текстом «Это Спарта».Вы можете нажимать как сложный элемент так, как хотите, и вы можете нажимать элемент непосредственно из области действия, поэтому вам не нужно определять его в шаблоне.

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

---

Если ни один из этих вариантов будет работать, потому что это действительно динамический объект, то я хотел бы начать смотреть на использовании директивы для него, как другие предложили (также посмотреть на $ компиляции). Но из того, что вы сказали в вопросе, я думаю, что директива будет заключаться в том, чтобы усложнить вещи бесполезно.

Answer 2

Предполагая, что вы делаете это в директиве, и у вас есть угловой РОМ element, вы можете сделать

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

Answer 3

Я рекомендую вам прочитать ngDirective и документы angular.element.

Подсказка: angular.element имеет метод append().

Answer 4

Это очень просто, но какой-то комплекс, если вы не знаете, с чего начать - я действительно рекомендую посмотреть учебник и следовать ему до конца: http://docs.angularjs.org/tutorial/ - Как это познакомит вас со всеми концепциями вокруг Angular, который поможет вам понять технические термины, используемые для описания решения.

Если вы создаете новые пункты меню целиком, если в контроллере вашего меню что-то вроде:

// 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}); 
} 

И в шаблоне, использовать массив внутри нг-повтора для создания меню:

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

Если вы просто хотите, чтобы включить отображение элемента, который может быть скрытой, вы можете использовать ng-if или ng-show

Answer 5

Мы можем использовать $ scope в App Controller для создания элементов Div, а затем мы можем добавить в него другие элементы Div. Вот пример:

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

Для дополнительной иллюстрации, здесь каждая книга имеют некоторые атрибуты (имя, категория, цена и автор) и Книга1 является самым внешним Div элемент и имеет свои атрибуты, как внутренние Div элементы.

Created HTML element will be something like that