Al hacer clic en el icono de ojo de fa quiero enfocar / resaltar solo ese div.

Html:

<i style="float: right; margin: 8px; cursor: pointer;" class="fa fa-eye" ng-click="focus()"></i>

Js:

$scope.focus = function($element) {
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };

En lugar de id="last" tengo que encontrar la identificación al hacer clic en el icono y luego necesito agregar clase ...

Intenté: $($event.target).parent() pero no pude obtener el resultado.

Demostración: http://plnkr.co/edit/HvTRdjNVdmHjnyG41O4F?p=preview

Por favor, ayúdeme.

1
Javascript Coder 10 dic. 2015 a las 10:07

3 respuestas

La mejor respuesta

Simplemente pase la propiedad $event de angularjs en el método ng-click.

ng-click="focus($event)" 

En su método, hágalo.

    $scope.focus = function($element) {
        var parent= $($element.target).closest("div");
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };
1
ngLover 10 dic. 2015 a las 07:45

Si lees este hilo:

¿Pasar automáticamente $ event con ng-click?

Verá el comentario de zeroflagL, que acabo de votar, está intentando modificar un componente visual en un controlador, que no es la intención de este controlador

Además está respaldado por la documentación angular: 'Los controladores deben contener solo lógica de negocios. Poner cualquier lógica de presentación en los Controladores afecta significativamente su capacidad de prueba. ' https://docs.angularjs.org/guide/controller

No hay nada que le impida usar javascript antiguo simple aquí

He agregado un bloque de script que aplica un estilo, no al padre directo, sino a algunos

Aquí está tu plunker modificado,

http://plnkr.co/edit/0x4ZqKoQcQLHXMMWtLJD

Pero en esencia aquí están las adiciones:

Index.html:

<script>
var _handleclick = function(ele) {
ele.parentElement.parentElement.parentElement.style.backgroundColor = 'red';
}
</script>

Template.html:

<i style="float: right; margin: 8px; cursor: pointer;" class="fa fa-eye" onclick="_handleclick(this)" ng-click="focus()"></i>
1
Community 23 may. 2017 a las 11:52

Puede usar this para obtener el objeto actual,

ng-click="focus(this)"

Luego en la función,

$scope.focus = function($element) {
        var parent= $($element).closest("div");
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };

.closest("div") obtendrá el div padre. La ventaja de closest() sobre parent() es que puede atravesar múltiples niveles.

2
Anoop Joshi 10 dic. 2015 a las 07:10
34195701