6

我的 JavaScript 经验很少。我需要在点击一个项目时添加一个菜单。我们被要求从头开始构建它，而不使用任何库，如引导组件或 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>
4

5 回答 5

7

有几件事浮现在脑海。首先，您确定需要在点击时实际创建元素吗？如果您要在单击时显示固定元素，那么更好的方法是正常生成元素，但在单击之前不显示它。就像是：

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

如果这些选项都不起作用，因为它是一个真正的动态对象，那么我将开始考虑使用其他人建议的指令（也看看 $compile）。但从你在问题中所说的来看，我认为指令会使事情不必要地复杂化。

于 2013-11-11T14:00:36.493 回答
4

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

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

于 2013-11-11T13:43:59.177 回答
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}); 
}

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

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

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

于 2013-11-11T13:51:19.813 回答
2

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

element.append("<div>Your child element html </div>");
于 2013-11-11T13:42:27.473 回答
0

我们可以在 App Controller 中使用 $scope 来创建 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);

为了更多说明，这里每本书都有一些属性（名称、类别、价格和作者），book1 是最外层的 Div 元素，它的属性是内层的 Div 元素。

创建的 HTML 元素将是这样的

于 2017-06-12T12:55:13.483 回答