ng-点击内部ng-重复不工作:聚焦和显示

Question

这里的网络开发者。

我想知道为什么这把小提琴不工作。当您单击下拉菜单中的链接时，我希望会出现一个警告，但没有一个出现。标记为‘叫喊’的按钮提供了所需的行为，但它不是下拉元素。

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;
}

我已经寻找了几种解决方案，虽然有相当多的解决方案，但没有一个解决方案中混入了缺乏经验的css的难题。StackOverflow不允许我在一篇文章中有两个以上的链接，所以这里是我看过的解决方案之一。

正如您所看到的，我已经使用$parent来避免ngRepeat指令的转移。

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

移除CSS使其工作，但在那里是什么打破了角？

Answer 1

为了在元素上执行click事件，需要在同一个元素上执行mousedown和mouseup事件。在您的示例中，当鼠标向下执行时，当您从输入中失去焦点时，css规则input.autocompleted + ul{display: none;}就会出现在图片中，最终mouseup永远不会发生在该元素上，也不会执行click事件。您可以通过将<a ng-click="yell()">更改为<a ng-mousedown="yell()">来测试这一点，然后就会看到警报正在发生。另外，当您在建议中输入字符时，典型的自动完成通常不会显示单击textbox上的项。可能当您实现时，您不应该进入这些问题。

小提琴

顺便提一句，语法，因为在1.3版本中，全局范围控制器发现将中断(虽然可以选择加入)。

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