我无法使这项工作达到预期的效果，请您给我提些建议吗？
注意：这项工作，如果我是从控制台运行的，但不是从链接功能运行的。
angular.element('ul.dropdown-user li:last').before('<li class="divider"></li>');
项目：
[
{
label: 'User profile',
link : '#',
icon : 'user'
},
{
label: 'Setting',
link : '#',
icon : 'gear'
},
{
label : 'Logout',
link : '#',
icon : 'sign-out'
}]
模板：
$templateCache.put("template/dropdown-user.html",
'<ul class="dropdown-menu dropdown-user">'+
'<li ng-repeat="item in items">'+
'<a href="{{item.link}}"><i class="fa fa-{{item.icon}} fa-fw"></i> {{item.label}}</a>'+
'</li>'+
'</ul>'
)
指示：
.directive('navbarMenuUserItem',[function(){
return {
restrict: 'E',
templateUrl: 'template/dropdown-user.html',
replace: true,
scope:{
items: '=',
},
link: function(scope, element, attrs){
//It doesn't work
angular.element('ul.dropdown-user li:last').before('<li class="divider"></li>');
//Any suggestion, please?
}
}
}])
预期结果：
<ul class="dropdown-menu dropdown-user ng-isolate-scope" items="usermenu">
<li>
<a href="#"><i class="fa fa-user fa-fw"></i>User profile</a>
</li>
<li>
<a href="#"><i class="fa fa-gear fa-fw"></i> Setting</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="ng-binding"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
不幸的是，当您致电
angular.element('ul.dropdown-user li:last').before('<li class="divider"></li>');
角度尚未渲染视图。实际上，我们不应该像这样在链接函数中进行DOM操作。
尝试再添加1个要渲染为分隔线的对象：
[{
label: 'User profile',
link: '#',
icon: 'user'
}, {
label: 'Setting',
link: '#',
icon: 'gear'
},
{
isDivider:true
},{
label: 'Logout',
link: '#',
icon: 'sign-out'
}];
使用ng-repeat-start和ng-repeat-end https://docs.angularjs.org/api/ng/directive/ngRepeat修改模板代码，使其类似：
<ul class="dropdown-menu dropdown-user">
<li ng-repeat-start="item in items" ng-if="!item.isDivider">
<a href="{{item.link}}"><i class="fa fa-{{item.icon}} fa-fw"></i> {{item.label}} </a>
</li>
<li ng-repeat-end class="divider" ng-if="item.isDivider">
</li>
</ul>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句