在ng-repeat中，ng-click不支持:focus和display

Noob web developer here.

新手web开发人员。

I want to know why this fiddle doesn't work. When you click on a link in the dropdown menu, I would expect an alert to appear, but none does. The button labeled 'yell' gives the desired behavior, but it's not a dropdown element.

我想知道为什么这个小提琴不能演奏。当您单击下拉菜单中的链接时，我预计会出现警报，但没有一个会出现警报。标记为“yell”的按钮给出了所需的行为，但它不是下拉元素。

Javascript

function apiCtrl($scope) {

    $scope.fish = [
        'blum',
        'blum',
        'shub'
    ];

    $scope.yell = function() {
        alert("HEY");
    };
}

HTML

<div ng-controller="apiCtrl">
    <button ng-click='yell()'>yell</button>
    <br>
    <input class='autocompleted' type='text'/>
    <ul>
        <li ng-repeat='f in fish' tabIndex='-1'>
            <a ng-click="$parent.yell()"> {{f}}
            </a>
        </li>
    </ul>
</div>

CSS

input.autocompleted + ul {
  display: none;
}

input.autocompleted:focus + ul {
  padding: 2px;
  margin: 1px;
  list-style-type: none;
  display: block;
  position: absolute;
  z-index: 2;
  background-color: #FFF;
  border: 1px solid #000;
}

I've looked for several solutions, and while there are quite a few, none of them have the added conundrum of inexperienced css mixed in. * won't allow me more than two links in one post, so here's one of the solutions I looked at.

我已经寻找了几种解决方案，虽然有很多，但没有一种方案能像没有经验的css混合一样带来额外的难题。*不允许我在一个帖子中链接超过两个链接，所以这里有一个解决方案。

As you can see, I've used $parent to dodge the ngRepeat directive's transclusion.

如您所见，我使用了$parent来避免ngRepeat指令的透射。

I tried using $rootScope to create global access to yell(), as another solution suggested. No dice.

我尝试使用$rootScope创建对yell()的全局访问，正如另一个解决方案所建议的那样。不行。

Removing the CSS makes it work, but what is it in there that breaks Angular?

去掉CSS就可以工作了，但是有什么东西打破了棱角?

1 个解决方案

#1

In order for click event to execute on an element, mousedown and mouseup event needs to happen on the same element. In your case as the mousedown happens, the css rule input.autocompleted + ul{display: none;} comes into picture as you lose focus from the input, eventually mouseup never happens on that element and no click event executes. You can test this by changing <a ng-click="yell()"> to <a ng-mousedown="yell()"> and you will see the alert happening. Also a typical autocomplete does not show the items on click of the textbox instead generally when you type the characters in the suggestions show up. Possibly when you implement that you should not get into these issues.

为了在元素上执行单击事件，需要在相同的元素上执行mousedown和mouseup事件。在您的例子中，当鼠标向下时，css规则输入。自动完成+ ul{display: none;}进入图片时，您从输入中失去焦点，最终mouseup不会发生在该元素上，也不会执行单击事件。您可以通过更改 < ng-mousedown =“叫()”>，你会看到警报发生。此外，当您在建议中键入字符时，通常不会显示单击文本框时的项。可能当你实现的时候，你不应该涉及到这些问题。

Fiddle

小提琴

On a side note, it would be better to use module.controller('controllerName', constructorWithDep) syntax since global scope controller discovery will be broken (Can opt in though) with version 1.3.

另一方面，最好使用模块。控制器('controllerName'， constructorWithDep)语法，因为全局范围控制器发现将在1.3版本中被破坏(可以选择进入)。

Another thing to mention that usage of $parent is not a good practice, instead you could use . syntax on the items being bound on the child scope. In your case you don't need that at all since yell is a function defined on its parent scope and is a reference type it will be automatically carried down via prototypical inheritance to its child scope(s).

另外要注意的是，使用$parent不是一个很好的实践，相反，您可以使用它。子范围上绑定的项的语法。在您的情况下，您根本不需要这样做，因为yell是在其父作用域上定义的函数，是一个引用类型，它将通过原型继承自动地传递到它的子范围(s)。

#1