Question

我的javascript经验非常少。我需要在点击项目时添加菜单。我们被要求从头开始构建它，而不使用任何库，如bootstrap compoments或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-IDC菜单的操作是一个数组，它将包含更多带有操作的菜单，它应该在子菜单中打开。

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>

如果你需要它是动态的，因为你可能会添加几个元素，而你不知道有多少元素，你应该看一下使用repeat和push元素到列表中。像这样：

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

每次单击“添加项目”文本，都会创建另一个文本“This is Sparta”的div。您可以根据需要推送复杂的项目，并且可以直接从范围推送项目，这样您就不必在模板中定义它。

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

如果这两个选项都不起作用，因为它是一个真正的动态对象，那么我会开始考虑使用其他人建议的指令（也看看$ compile）。但是根据你在问题中的说法，我认为指令会使事情变得不必要。

Answer 2

我建议您阅读ngDirective和angular.element文档。

提示：angular.element有append()方法。

Answer 3

这两个都非常简单，但是如果你不知道从哪里开始会有些复杂 - 我真的建议你看一下教程，然后端到端地跟着它：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}); 
}

在模板中，使用ng-repeat中的数组创建菜单：

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

如果您只想切换可能隐藏的项目的显示，可以使用ng-if或ng-show

Answer 4

假设您在指令中执行此操作并且您拥有角度dom element，则可以执行

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

Answer 5

我们可以在App Controller中使用$ scope创建Div Elements，然后我们可以类似地将其他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);

更多插图，这里每本书都有一些属性（名称，类别，价格和作者），book1是最外层的Div元素，并将其属性作为内部Div元素。

Created HTML element will be something like that

以角度动态创建元素

5 个答案: