在角动态创建元素 [英] Creating elements Dynamically in Angular

问题描述

我很少JavaScript的经验。我需要添加的项目点击菜单。我们一直要求从头开始构建它，而无需使用像引导元件库或JQuery的任何库。

我们正在使用Angularjs。在角我想知道正确的方法来创建新的元素。喜欢的东西是什么，我们没有使用document.createElement 。

我添加了一些code对你们有一个更好的主意是我想做的事情。

菜单指令

  .directive（'菜单'，[$位置，menuData功能工厂（位置，menuData）{
    返回{
        templateUrl：谐音/ menu.html
        控制器：函数（$范围，$位置$文件）{
            $ scope.init =功能（菜单）{
                的console.log（的init（）被称为）;
                的console.log（$文件：+ $文件）;                如果（menu​​.selected）{
                    $ scope.tabSelected（菜单）;
                }
            }
            $ scope.creteMenu =功能（menu​​Content）{
                //这是当动作是一个数组被调用。
            }
            $ scope.tabSelected =功能（菜单）{
                $ location.url（menu​​.action）;
                $ scope.selected =菜单;
            }
            $ scope.click =功能（菜单）{
                如果（typeof运算（menu​​.action）=='串'）{
                    $ scope.tabSelected（菜单）;
                }
            }
        }，
        链接：功能（范围，元素，ATTRS）{
            scope.menuData = menuData;
        }
    };
}]）
 

在服务菜单中选择数据。

  .value的（'menuData'，[{标号：'过程-IDC'，动作：[]}，{标签：仪表板，动作：'/仪表盘，选择：真正}，{标签：所有作业，动作：'/ alljobs'，选择：假}，{标签：我的工作，动作：'/ MyJobs的'，选择：假}，{标签：管理'行动：'/管理，选择：假}，{标签：'报告'，动作：'/报告，选择：假}]）;
 

如果您发现过程，IDC菜单的作用是一个数组，它将包含更多的菜单，在它的行动，它应该在子菜单中打开。

Menu.html（部分）

 ＆LT; UL类=菜单＆GT;
    ＆LT;李纳克级={activeMenu：菜单==选择}NG-的init =的init（菜单）数据-NG-点击=点击（菜单）数据-NG-重复=菜单中的menuData ＆GT; {{menu.label}}＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

有几件事情浮现在脑海中。首先，你确定你需要实际创建点击元素？如果你正在做上显示点击一个固定的元素则更好的方法是生成元素作为正常的，但直到你点击没有表现出来。是这样的：

 ＆LT; D​​IV NG点击=show_it =真正的＆gt;显示项目＆lt; / DIV＆GT;
＆LT; D​​IV NG秀=show_it＆GT;隐藏，直到点击。可以包含{{动态}}内容为正常＆LT; / DIV＆GT;
 

如果你需要它是动态的，因为你可能会添加一些元素，而你不知道有多少，你应该看看使用重复，推动元素融入到一个列表。事情是这样的：

 ＆LT; D​​IV NG点击=array_of_items.push（{'国家'：'斯巴达'}）＆gt;添加项目＆lt; / DIV＆GT;
＆LT; D​​IV NG重复=项array_of_items＆GT;这是{{item.country}}＆LT; / DIV＆GT;
 

下面的添加项目文本将创建与文本这是斯巴达另一个div的每次点击付费。只要你想，你可以把复杂的项目，你可以直接从范围推的项目，所以你不必在模板中定义它。

 ＆LT; D​​IV NG点击=functionInControllerThatPushesToArray（）＆gt;添加项目＆lt; / DIV＆GT;
＆LT; D​​IV NG重复=项array_of_items＆GT;这是{{item.country}}＆LT; / DIV＆GT;
 

---

如果没有这些选项会起作用，因为它是一个真正的动态对象，然后我就开始考虑使用一个指令来它像其他人所说（还看$编译）。但是，从你的提问时说，我认为一个指令，将不必要的东西复杂化。

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>

解决方案

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.

这篇关于在角动态创建元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！