javascript - 在 Angular 中动态创建元素

Question

我的 javascript 经验很少。我需要在单击某个项目时添加一个菜单。我们被要求从头开始构建它，而不使用任何库，如 bootstrap 组件或 JQuery。

我们正在使用 Angularjs。在 Angular 上，我想知道创建新元素的正确方法。类似于我们没有的 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 并将元素插入列表。像这样:

<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)。但从你在问题中所说的来看，我认为指令会不必要地使事情复杂化。