我有以下指令:
myDirective.directive('sidebar', function () {
return {
restrict: 'E',
replace: true,
template: '<li ng-repeat="m in menu" ng-class="{\'dropdown\':m.submenu}">' +
'<a href="{{m.url}}" ng-class="{\'dropdown-toggle\':m.submenu}" ng-attr="{\'data-toggle=dropdown\': m.submenu">' +
'<i class="{{m.image}}"></i>' +
' {{m.name}}' +
'<b class="caret" ng-if="m.submenu"></b>' +
'</a>' +
'<ul ng-if="m.submenu" class="dropdown-menu">' +
'<li ng-repeat="s in m.submenu"><a href="{{s.url}}"><i class="{{s.image}}"></i> {{s.name}}</a></li>' +
'</ul>' +
'</li>',
link: function (scope, elem, attrs) {
scope.menu = [
{
"name": "Home",
"url": "/",
"image": "fa fa-bar-chart-o"
},
{
"name": "Data Integration",
"url": "/manage/dataintegration/index",
"image": "fa fa-dashboard"
},
{
"name": "Users",
"url": "/manage/users/index",
"image": "fa fa-dashboard"
},
{
"name": "Logger",
"url": "/manage/logger/index",
"image": "fa fa-dashboard"
},
{
"name": "Drop",
"url": "",
"image": "fa fa-dashboard",
"submenu": [
{
"name": "Logger",
"url": "/manage/logger/index",
"image": "fa fa-dashboard"
},
{
"name": "Logger2",
"url": "/manage/logger/index",
"image": "fa fa-dashboard"
}
]
}
]
}
}
});
我正在尝试使用
ng-attr
,仅在m.submenu
存在时将data-toggle='dropdown'
属性添加到a
标签,但它无效。请注意保留HTML标记。