[英]AngularJS append html to dom element
Im working on a small web app, and there is a side menu that has nav links in it. 我正在开发一个小型Web应用程序,并且其中有一个包含导航链接的侧边菜单。 Each link when clicked pulls out a hidden panel and should display a list of items specific to that link.
单击每个链接都会拉出一个隐藏的面板,并应显示该链接特定的项目列表。
I have most of the functionality working except Im stuck on how to append either a templateURL or just html to the panel. 除了Im坚持如何将templateURL或只是html附加到面板之外,我可以使用大多数功能。
Any guidance would be great. 任何指导都会很棒。
heres what I have so far: html 继承人我到目前为止所拥有的:html
<!-- Pullout menu -->
<nav id="sidebar-pullout">
<div id="menu-list"></div>
</nav>
app.js app.js
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])
.config(function($routeProvider){
$routeProvider..when('/organizations', {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: 'OrganizationController',
activetab: 'organizations'
})
.otherwise( {redirectTo: '/dashboard'} );
});
// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
// adding html to the menu-list
configApp.directive('menu-list', function(){
return {
template: '<span ng-transclude >append som html here</span>',
replace: true,
transclude: true,
controller: 'OrganizationController'
};
});
Here is another way you might be able to go about it. 这是您可能能够解决的另一种方法。 By keeping a reference to menu items and contents.
通过保留对菜单项和内容的引用。 You could keep the side panel content in separate HTML files.
您可以将侧面板内容保留在单独的HTML文件中。
configApp.directive('menuList', function() {
return {
restrict: 'EA',
link: function(scope, el, attr) {
var activeId = null;
scope.showContent = function(id) {
activeId = id;
};
scope.isActive = function(id) {
return activeId === id;
}
scope.menuItems = [{
id: 'item1',
name: 'Menu Item 1',
content: 'path/to/menuItem1content.html'
}, {
id: 'item2',
name: 'Menu Item 2',
content: 'path/to/menuItem2content.html'
}]
}
};
});
Then in you HTML maybe something like this. 然后在您的HTML中可能是这样的。
<div menuList>
<nav id="sidebar-menu">
<ul>
<li ng-repeat="item in menuItems">
<a ng-click="showContent(item.id)">{{ item.name }}</a>
</li>
</ul>
</nav>
<div id="sidebar-content">
<div class="content"
ng-repeat="item in menuItems"
ng-include="item.content"
ng-show="isActive(item.id)"></div>
</div>
</div>
This is just an idea and you could use angular animation to animate the sidebar sliding and stuff. 这只是一个想法,您可以使用角度动画为边栏滑动和填充动画。
You are specifying your ng-transclude
directive on the wrong element. 您在错误的元素上指定了
ng-transclude
指令。 You are placing it on your span
tag. 您将其放置在
span
标签上。 Try something like this instead: 尝试这样的事情:
<div>
<span>/*My template html here*/</span>
<div ng-transclude></div>
</div>
It also looks like you're specifying your directive incorrectly. 看起来您指定的指令不正确。 Try this:
尝试这个:
configApp.directive('menuList', function () {
return {
restrict: 'A',
replace: true, // note: this syntax will soon be deprecated
template: '<see above snippet>'
};
});
In particular, notice restrict
, which specifies how this directive will be used (A: attribute on html element, E: as an element itself, C: as a class). 特别地,请注意
restrict
,它指定如何使用此伪指令(html元素上的A:属性,E:作为元素本身,C:作为类)。 Here we are saying we want to use our directive as an element, E
. 在这里,我们要说的是要使用指令作为元素
E
Also, note that I used the name menuList
instead of menu-list
. 另外,请注意,我使用的名称是
menuList
而不是menu-list
。 AngularJS uses camel-case in directive definition, and maps the directive names found in the html into their camel case counterparts. AngularJS在指令定义中使用驼峰式大小写,并将在html中找到的指令名称映射到其驼峰式大小写中。 So, in the html we will still use this directive like this:
menu-list
, but we will declare it using camel-case. 因此,在html中,我们仍将使用以下指令:
menu-list
,但将使用camel-case进行声明。 Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.