我有很少的
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',{ label: 'Admin',action: '/admin',{ 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>
如果你需要它是动态的,因为你可能会添加几个元素,而你不知道有多少元素,你应该看一下使用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).但是从你在问题中所说的话来看,我认为指令会让事情变得不必要.
