[英]AngularJS append html to dom element
我正在开发一个小型Web应用程序,并且其中有一个包含导航链接的侧边菜单。 单击每个链接都会拉出一个隐藏的面板,并应显示该链接特定的项目列表。
除了Im坚持如何将templateURL或只是html附加到面板之外,我可以使用大多数功能。
任何指导都会很棒。
继承人我到目前为止所拥有的:html
<!-- Pullout menu -->
<nav id="sidebar-pullout">
<div id="menu-list"></div>
</nav>
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'
};
});
这是您可能能够解决的另一种方法。 通过保留对菜单项和内容的引用。 您可以将侧面板内容保留在单独的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'
}]
}
};
});
然后在您的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>
这只是一个想法,您可以使用角度动画为边栏滑动和填充动画。
您在错误的元素上指定了ng-transclude
指令。 您将其放置在span
标签上。 尝试这样的事情:
<div>
<span>/*My template html here*/</span>
<div ng-transclude></div>
</div>
看起来您指定的指令不正确。 尝试这个:
configApp.directive('menuList', function () {
return {
restrict: 'A',
replace: true, // note: this syntax will soon be deprecated
template: '<see above snippet>'
};
});
特别地,请注意restrict
,它指定如何使用此伪指令(html元素上的A:属性,E:作为元素本身,C:作为类)。 在这里,我们要说的是要使用指令作为元素E
另外,请注意,我使用的名称是menuList
而不是menu-list
。 AngularJS在指令定义中使用驼峰式大小写,并将在html中找到的指令名称映射到其驼峰式大小写中。 因此,在html中,我们仍将使用以下指令: menu-list
,但将使用camel-case进行声明。 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.