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.

  • Elementos Hammer.js en contenedor contenedor de desplazamiento absoluto
  • Cómo configurar jQuery arrastrable min / max-left y min / max-right
  • Cómo hacer que todo el div se pueda hacer clic
  • Cómo mostrar una pantalla de carga mientras se carga el contenido del sitio
  • CSS: ocultando el cursor sin ningún file externo
  • jquery Desplazarse al nombre de la class
  • ¿JQuery anima entre dos classs de CSS diferentes?
  • Problema con el impulso que se desplaza en la aplicación del iPad
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.