ng-click inside ng-repeat no funciona con: focus y display

Desarrollador web Noob aquí.

Quiero saber por qué este violín no funciona. Cuando hace clic en un enlace en el menu desplegable, esperaría que apareciera una alerta, pero ninguna lo hace. El button labeldo 'gritar' da el comportamiento deseado, pero no es un elemento desplegable.

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

He buscado varias soluciones, y si bien hay bastantes, ninguna de ellas tiene el enigma añadido de css inexperto mezclado. StackOverflow no me permitirá más de dos enlaces en una publicación, así que aquí está uno de soluciones que miré.

Como puede ver, he usado $ parent para eludir la transclusión de la directiva ngRepeat.

Intenté usar $rootScope para crear acceso global a yell() , como sugirió otra solución. No dados.

La eliminación de CSS lo hace funcionar, pero ¿qué hay allí que rompa Angular?

One Solution collect form web for “ng-click inside ng-repeat no funciona con: focus y display”

Para que el evento click se ejecute en un elemento, el evento mousedown y mouseup debe suceder en el mismo elemento. En su caso, cuando ocurre el mousedown, la regla css input.autocompleted + ul{display: none;} entra en escena cuando pierde el foco de la input, eventualmente el mouseup nunca ocurre en ese elemento y no se ejecuta ningún clic. Puede probar esto cambiando <a ng-click="yell()"> a <a ng-mousedown="yell()"> y verá que se está produciendo la alerta. Además, una autocompleta típica no muestra los elementos onclick en el textbox en general cuando escribe los caracteres en las sugerencias que aparecen. Posiblemente cuando implemente eso no debería entrar en estos problemas.

Violín

En una nota al margen, sería mejor utilizar la module.controller('controllerName', constructorWithDep) ya que el descubrimiento del controller de scope global se romperá (aunque puede optar por) con la versión 1.3 .

Otra cosa para mencionar que el uso de $parent no es una buena práctica, en su lugar podrías usar . syntax de los elementos que están vinculados en el ámbito hijo. En su caso, no necesita eso en absoluto, ya que el yell es una function definida en su scope principal y es un tipo de reference que se transferirá automáticamente a través de inheritance (s) de su hijo (s) a través de inheritance prototípica.

  • Comprobar, si el elemento es un div
  • Establecer valores de fotogtwigs key de Webkit mediante la variable Javascript
  • Redimensionar dinámicamente el tamaño de la fuente para adaptarse al tamaño del contenedor
  • Evitar el desplazamiento en un teléfono inteligente para un tamaño de pantalla específico
  • El filtrado de la tabla Bootstrap no funciona
  • Crear una secuencia de animation secuencia jquery
  • Cómo include bibliotecas de Material Design sin npm
  • ¿Cómo puedo agregar un cuadro de alerta que dice "juego terminado" cuando la pelota toca el borde superior?
  • La interfaz Javascript no funciona con Android 4.2
  • Crear triángulo sensible con text
  • Obtener posX y posY de background-position en Javascript
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.