ng-repeat 内的 ng-click 不适用于 :focus 和 display

Posted 2023-03-06

【中文标题】ng-repeat 内的 ng-click 不适用于 :focus 和 display

【英文标题】：ng-click inside ng-repeat doesn't work with :focus and display

【发布时间】：2014-10-04 23:02:56

【问题描述】：

这里是新手网络开发人员。

我想知道为什么this fiddle 不起作用。当您单击下拉菜单中的链接时，我希望会出现警报，但没有出现。标记为“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;

我已经寻找了几个解决方案，虽然有很多，但没有一个包含没有经验的 css 的附加难题。*** 不允许我在一篇文章中包含两个以上的链接，所以 here是我看过的解决方案之一。

如你所见，我使用 $parent 来躲避 ngRepeat 指令的嵌入。

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

删除 CSS 使其工作，但它破坏 Angular 的原因是什么？

【问题讨论】：

Here are 又看了几个解决方案。

These don't 也有帮助。

为了让点击发生，mousedown 和 mouseup 必须发生在同一个元素上。在您的情况下，当鼠标按下时它只是隐藏了..您可以在这里看到它jsfiddle.net/aktobc0p

【参考方案1】：

为了在一个元素上执行 click 事件，mousedown 和 mouseup 事件需要在同一个元素上发生。在您的情况下，当 mousedown 发生时，css 规则 input.autocompleted + uldisplay: none; 会在您失去输入焦点时出现，最终 mouseup 永远不会在该元素上发生并且不会执行单击事件。您可以通过将<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 是在其父作用域上定义的函数，并且是一种引用类型，它将通过原型继承自动传递到其子作用域。