Obtener el $esta en angularjs

Aquí está mi problema.

Estructura HTML :

<tr><td><a ng-click=aClick()>Click Me</a></td></tr>

No puedo tener ningún tipo de identificación/clase asociada con el y

Lo que necesito es que al hacer clic en ‘Click Me», el <tr> oculta. Necesito un jQuery solución. De alguna forma yo no soy capaz de utilizar $(this).

FUNCIÓN:

$scope.aClick = function() {
   $(this).parent().parent().css('display','block');
};

Pero esta afirmación me da un error.

  • ¿Qué error se están obteniendo?
  • dice que no .parent().
  • $scope.$aplicar() funciona de maravilla para los que les gusta hacer esto de la forma angular.
  • ¿qué es la devolución de llamada que están hablando ? Donde es la devolución de llamada que viene de ? Estás haciendo $.ajax o $http ?
  • No. De hecho, estoy ejecutando db declaraciones.
  • tech-blog.maddyzone.com/javascript/this-in-angularjs un buen artículo sobre esto en angular

4 Kommentare

  1. 35

    Nota: yo no recomendaría el uso, manipulación del árbol dom en un controlador, puede escribir una directiva para ello. Que dice que usted puede utilizar el $event para obtener el objeto de evento, desde la que se puede conseguir el destino del evento y utilizar con jquery.

    <tr><td><a ng-click="aClick($event)">Click Me</a></td></tr>

    Y

      $scope.aClick = function(event) {
         $(event.target).parent().parent().css('display','none');
      };

    Demo: Plunker

    Actualización

    Lo más apropiado angular de la solución es el uso de ng-hide

    <tr ng-hide="hideRow"><td><a ng-click="hideRow = true">Click Me</a></td></tr>

    Demo: Plunker

    Actualizado demo con ng-repeat

    • Esta es una solución para el problema, pero no es la solución correcta. Esta solución está estrechamente ligado con la estructura de tu código html. Sé que @Arun P Johny estaba dando una solución para resolver su problema inmediato, pero pienso que él debe abstenerse de hacerlo. Es un perjuicio para el resto de los desarrolladores ( en su mayoría a la siguiente desarrollador que va a estar trabajando con este código! ).
    • sí, como he señalado en la respuesta no es resolver el problema que está enfrentando.
    • La solución correcta es utilizar un alcance variable para establecer el estado de la pantalla de los padres
    • Yo sé que usted ha mencionado que. Pero lo extraño es que yo no creo que él lo notó. Gracias por la actualización :). Yo sé que usted sabe realmente la solución correcta ( he visto tus otras respuestas ! ).. Solo quiero que conducir con la solución de la derecha primero y luego si insisten.. proporcionar el mal 🙂
    • ¿has visto la última actualización, creo que debería resolver el problema correctamente
    • Yo hice. Ver mis comentarios ( actualizado ) anterior.
    • De acuerdo con la actualización de la solución. No es la de solución aquí. Funcionará sólo si existe una fila. Pero en una tabla, esto normalmente no es el caso. Para varias filas, la actualización de la solución sería no sólo el trabajo. Usted necesita una función para comprobar si la fila actual (índice?) es la que se muestra o se oculta – que sería el más de solución
    • en ese caso se puede usar un mapa para guardar el estado
    • o si es dentro de un ng-repeat cada fila tendrá su propio ámbito
    • HASTA que cada elemento de un ng-repeat directiva tiene su propio ámbito. De todos modos, creo que debemos usar una función en lugar de la asignación directa a un alcance variable desde dentro del HTML.
    • primero de todo ..es una ELLA. Las niñas hacen uso también. Y segundo …mayb la actualización podría trabajar para otras personas que puedan enfrentar el problema similar t no funciona para mí como la variable sobre la que ng-hide se llama se actualiza en una función de devolución de llamada y por lo tanto, ng-hide no se actualiza. Si estamos buscando la respuesta más apropiada, a continuación, $scope.$aplicar es la solución correcta.
    • lo siento por la confusión. Si la variable se actualiza en una devolución de llamada o no todavía no deberá requerir a hacer $scope.$aplicar() a menos que usted está utilizando una biblioteca de terceros para hacer sus peticiones http! ( eres ? ) . Usted dijo que se están haciendo db solicitudes ? Yo no entiendo eso. ¿Cómo hace db solicitudes desde el lado del cliente?
    • Yo estoy usando la base de datos local de HTML5 web sql. En la llamada vuelta de la excutesql necesito actualizar una variable i.e sólo cuando la consulta se ha realizado con éxito. Cuando intento acceder a este var (utilizando dos vías de enlace) en ng-hide, su valor no se refleja, a menos que use un $aplican
    • Probablemente, usted debe crear un servicio para su localDB. Este servicio debe inyectar $rootScope y llame a $rootScope.$aplicar() cuando regresen a los valores de la misma. Esta es la forma $http funciona internamente. Si usted hace esto, usted no tiene que llamar a $scope.$se aplicarán en todas partes..
    • ohh!! La verdad es que desde que estoy recibiendo este problema sólo en un lugar, supongo que se podría evitar la creación del servicio .. 🙂

  2. 7

    Ya que usted está utilizando angular, usted debe muy rara vez se necesita para hacer real de la manipulación del árbol dom. En su lugar, compruebe el ng-hide/ng-show directiva que debe hacer esto para usted.

    Un ejemplo de la Angulares docs:

    <body>
        Click me: <input type="checkbox" ng-model="checked"><br/>
        Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/>
        Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>
    </body>

    Editar

    Si la variable en la expresión se actualiza de forma asincrónica, puede forzar una actualización con $scope.$aplicar

    • Como ya he dicho que requieren de jquery para hacer mi trabajo. La restricción con ng-hide es que la variable sobre la que se llama está actualizado en una función de devolución de llamada y por lo tanto, ng-hide no se actualiza.
    • A continuación, usted debe ser capaz de forzar una actualización con $sope.$apply
    • Ohk esto funciona demasiado y me alegro de saber ahora que me encantaría usar sólo angular a través de fuera. La adición de $scope.$aplicar(); al final de la función de devolución de llamada se resuelve el problema. Me gustaría poder aceptar esta respuesta ….
  3. 6

    Usted puede utilizar esta:

    JavaScript

    function TestCtrl($scope) {
        $scope.clickMe = function ($event) {
            $($event.target).parent().parent().css('display','none');
        };
    }

    HTML

    <div ng-app>
        <div ng-controller="TestCtrl">
            <a ng-click="clickMe($event)">Click me</a>
        </div>
    </div>

    Demostración en vivo

    • Definitivamente funciona ….Pero Arun publicado la respuesta antes y que es más preciso para lo que necesito … tan solo +1.
  4. 0

    ¿por qué no hacer algo tan simple como esto?
    Supongo que ejecutar esto en bucle…

    <div ng-repeat="row in table">
    <tr>
        <td>
            <a ng-class="{'hideme': hiddenRows[row.id]}" ng-click="hiddenRows[row.id] = true">Click Me</a>
        </td>
    </tr>
    </div>

    o incluso mejor

    <div ng-repeat="row in table">
        <tr ng-show="!hiddenRows[row.id]">
            <td>
                <a ng-click="hiddenRows[row.id] = true">Click Me</a>
            </td>
        </tr>
    </div>

    (Yo no prueba pero debe darle una idea)

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea