angularjs - llamar - Usando Angular, ¿cómo puedo vincular un evento de clic a un elemento y al hacer clic, deslizo hacia abajo y hacia abajo un elemento de un hermano?

llamar funcion angular desde html

Question

Estoy trabajando con Angular y tengo problemas para hacer algo para lo que normalmente uso jQuery.

Quiero vincular un evento de clic a un elemento y, al hacer clic, deslizar un elemento de hermandad hacia abajo y hacia arriba.

Así es como se vería jQuery:

$(''element'').click(function() {
    $(this).siblings(''element'').slideToggle();
});

Usando Angular he agregado un atributo ng-click con una función en mi marcado:

<div ng-click="events.displaySibling()"></div>

Y así es como se ve mi controlador:

app.controller(''myController'', [''$scope'', function($scope) {

    $scope.events = {};

    $scope.events.displaySibling = function() {
        console.log(''clicked'');
    }

}]);

Hasta ahora, esto está funcionando como se esperaba, pero no sé cómo lograr la diapositiva. Cualquier ayuda es muy apreciada.

Actualizar

He reemplazado lo que tenía con una directiva.

Mi marcado ahora se ve así:

<div class="wrapper padding myevent"></div>

He eliminado lo que tenía en mi controlador y he creado una nueva directiva.

app.directive(''myevent'', function() {
    return {
        restrict: ''C'',
        link: function(scope, element, attrs) {
            element.bind(''click'', function($event) {
                element.parent().children(''ul'').slideToggle();
            });
        }
    }
});

Sin embargo, todavía no puedo hacer que la diapositiva cambie para funcionar. No creo que SlideToggle () sea compatible con Angular. ¿Alguna sugerencia?

Answer 1

No estoy seguro exactamente sobre el comportamiento del que estás hablando, pero te animo a pensar de una manera ligeramente diferente. Menos jQuery, más angular.

Es decir, tenga su html algo como esto:

<div ng-click="visible = !visible"></div>
<div ng-show="visible">I am the sibling!</div>

A continuación, puede usar la compilación en ng-animate para hacer que el hermano se deslice - yearofmoo tiene una excelente descripción de cómo funciona $animate .

Este ejemplo es lo suficientemente simple como para poner la lógica de la pantalla en html, pero de lo contrario lo alentaría a que, por lo general, lo coloque en el controlador, así:

<div ng-click="toggleSibling()"></div>
<div ng-show="visible"></div>

Controlador:

app.controller(''SiblingExample'', function($scope){

  $scope.visible = false;

  $scope.toggleSibling = function(){
    $scope.visible = !$scope.visible;
  }

});

Este tipo de componente también es un candidato principal para una directiva, que lo empacaría perfectamente.

Answer 2

app.directive(''slideMySibling'', [function(){
  // Runs during compile
  return {
    // name: '''',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    // controller: function($scope, $element, $attrs, $transclude) {},
    // require: ''ngModel'', // Array = multiple requires, ? = optional, ^ = check parent elements
    restrict: ''A'', // E = Element, A = Attribute, C = Class, M = Comment
    // template: '''',
    // templateUrl: '''',
    // replace: true,
    // transclude: true,
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {
      iElm.bind("click", function(){
         $(this).siblings(''element'').slideToggle();
      })
    }
  };
}]);

El uso sería algo así como

<div slide-my-sibling><button>Some thing</button></div><div>Some sibling</div>

Tenga en cuenta que todo el "código" anterior es solo por el simple hecho de que no se ha probado realmente.

http://plnkr.co/edit/qd2CCXR3mjWavfZ1RHgA

Aquí hay una muestra de Plnkr, aunque como se menciona en los comentarios, esta no es una configuración ideal, ya que todavía tiene las suposiciones de javascript sobre la estructura de la vista, por lo que idealmente haría esto con unas pocas directivas donde una requiere la otra o mediante el uso de eventos (vea $ emitir, $ emitir, $ en).

También podría hacer que la directiva cree a los niños "programáticamente" a través de JavaScript y eludir el problema de no saber en qué contexto se está utilizando la directiva. Hay muchas maneras posibles de resolver estos problemas, aunque ninguno de los problemas lo detendrá. Funcionando funcionalmente, vale la pena señalarlo en aras de la reutilización, la estabilidad, las pruebas, etc.

Answer 3

Según este enlace: https://docs.angularjs.org/api/ng/function/angular.element

El elemento AngularJs en su fragmento de código representa el objeto JQuery DOM para el elemento relacionado. Si desea usar funciones de JQuery, debe usar la biblioteca JQuery antes de cargas angulares. Para obtener más detalles, vaya a través del enlace de arriba.

Answer 4

Mejores prácticas:

<div ng-if="view"></div>

$scope.view = true;

$scope.toggle = function(){
  $scope.view = ($scope.view) ? false : true;
}