我的JavaScript经验很少。我需要在单击某项时添加一个菜单。我们被要求从头开始构建它，而不使用任何引导组件或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>
我想到了几件事。首先，确定要在单击时实际创建元素吗？如果要在单击时显示固定的元素，那么更好的方法是正常生成该元素，但是直到单击后才显示它。就像是：
<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>
单击此处的“添加项目”文本将创建另一个带有文本“ 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）。但是从您在问题中所说的来看，我认为一项指示将是不必要地使事情复杂化。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句