Angular-material ng-click奇怪的边框高亮显示

Question

我在使用AngularJS和Angular-Material时遇到问题.

看看下面的代码:

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          {{item.name}}
       </li>
    </ul>
</div>

li标签附加了一个ng-click功能,其中包含一些业务逻辑.问题是当你点击它时出现一个奇怪的边框(类似于用户选择高亮),我似乎无法弄清楚它来自哪里.

这似乎只出现在我对元素有一个ng-click指令时(span元素上的相同行为)

使用的版本:

AngularJS - 1.4.1

角度材料 - 0.9.4

Angular-Aria - 1.4.0

Angular-Animate - 1.4.1

Angular-UI-Boostrap - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

有任何想法吗？请参阅此plnkr例如:http://plnkr.co/edit/60u8Ur？p = preview

Answer 1

你的问题是:焦点,你可以通过做这样的事情来解决

 span:focus {
    outline: none;
    border: 0;
 }

所以这只是为了您的范围,如果您想在其他地方删除它,您可以更具体地了解其他项目.

Answer 2

我遇到了与大多数元素相同的问题.

在我的情况下,遵循CSS代码:

*:focus {
    outline: none !important;
    border: 0 !important;
}

Answer 3

这可能很简单:为这些元素

添加nofocus类,

并将css添加到该类 :focus

.nofocus:focus {
    outline: none;
}