Question

Noob网站开发人员。

我想知道为什么this fiddle无效。当您单击下拉菜单中的链接时，我希望会出现一个警报，但没有。标有“大喊”的按钮＆＃39;给出了所需的行为，但它不是一个下拉元素。

的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的难题.StickOverflow在一个帖子中不允许超过两个链接，所以here是我看过的解决方案之一。

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

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

删除CSS使其工作，但是它在那里打破了Angular？

Answer 1

为了在元素上执行click事件，mousedown和mouseup事件需要在同一个元素上发生。在您发生mousedown的情况下，当您从输入中失去焦点时，css规则input.autocompleted + ul{display: none;}会出现在图片中，最终鼠标在该元素上永远不会发生，并且不会执行任何点击事件。您可以通过将<a ng-click="yell()">更改为<a ng-mousedown="yell()">来测试此问题，您将看到警报正在发生。此外，典型的自动填充功能不会显示单击文本框时的项目，而是通常在您显示的建议中键入字符时。可能在您实施时，您不应该遇到这些问题。

<强> Fiddle

旁注，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。

另外要提及的是$parent的使用不是一个好习惯，而是可以对绑定在子范围上的项使用.语法。在您的情况下，您根本不需要它，因为yell是在其父作用域上定义的函数，并且是一种引用类型，它将通过原型继承自动传递到其子作用域。< / p>

ng-click内部的ng-click不适用于：聚焦和显示

的Javascript

HTML

CSS

1 个答案: