Question

我无法按照预期的结果开展工作，请您给我任何建议？

注意：这项工作，如果我从控制台运行它，但它不是来自链接功能。

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>

Answer 1

不幸的是，当你打电话

angular.element('ul.dropdown-user li:last').before('<li class="divider"></li>');

angular不会渲染视图。实际上，我们不应该像这样在链接函数中进行DOM操作。

尝试添加另外一个要呈现为分隔符的对象：

[{
    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>

DEMO

在最后一个子项之前附加子元素

1 个答案: