Javascript 如何关注导航栏列表项

我所做的自定义筛选器和自定义指令存在问题。自定义指令用于聚焦导航栏，自定义过滤器用于突出显示搜索结果。在未连接过滤器之前，该指令可以正常工作。但一旦我实现了过滤器，指令就停止工作。 这是密码

.js

app.filter（'highlight'，函数（$sce）{
返回函数（文本、短语）{
如果（短语）text=text.replace（新的RegExp（“（“+短语+”）”，“gi”），
'$1')
返回$sce.trustAsHtml（文本）
}
})
app.directive（'focus'，function（）{
返回{
限制：“A”，
链接：函数（$范围、元素、属性）{
元素绑定（'keydown'，函数（e）{
var代码=e.keyCode | | e.which；
如果（代码===13）{
e、 预防默认值（）；
元素。next（）.focus（）；
}
});
}
}
})

html

{{info.name}

你能用上述行为发布演示吗？还有，

自定义过滤器在哪里？@MaximShoustin嗨，自定义过滤器就是我命名为highlight（位于.js代码顶部）的过滤器，很抱歉，我不知道如何附加屏幕截图。
app.filter('highlight', function($sce) {
return function(text, phrase) {
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')

    return $sce.trustAsHtml(text)
 }
})

app.directive('focus', function() {
 return {
    restrict: 'A',

    link: function($scope,element,attributes) {

        element.bind('keydown', function(e) {
            var code = e.keyCode || e.which;
            if (code === 13) {
                e.preventDefault();
                element.next().focus();
            }
        });
    }
 }
})

 <li>
                                <ul ng-repeat = "info in infos | filter:curInfo.name"  >
                                    <img src="{{info.image.link}}"/> {{info.name}}
                                    <li ng-repeat="group in info.groups | filter: curInfo" ng-bind-html="group.name | highlight:curInfo.name">
                                        <a href="#">{{group.name}}</a>
                                    </li>
                                    <div class="add list">
                                    <a href="" ng-click="addGroup(groups)">+Add group </a>
                                    </div>
                                </ul>
                            </li>