Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

174
Vistas
better approach against using directive or JQuery in Angular js

I have little experience with angular directive and have a scenario where i am not able to decide whether i should use JQuery or angular 1 directive.

I have objects list like :

[
 {
    "id":"sdf34fsf345gdfg",
    "name":"samson",
    "phone":"9876543210",
    "email":"abc@gmail.com"
 },
 {
    "id":"sdf34fsf3432fg45gdfg",
    "name":"xyd",
    "phone":"9876543210",
    "email":"xyz@gmail.com"
 }
]

this list i have to render like

   ---Name
   |______email
   |______mobile
   |
   ---Name
   |______email
   |______mobile

After rendering this list i should only allow user to select either email or mobile and if any one of each is selected the particular object should be marked as selected with its selected field.

Can anyone explain me proper approach to get it done or any angular module which will get it done according to the requirement. Also selected data should be returned like this below:

{
  "9876543210":{ //if mobile number was selected
      "name":"samson" 
  },
  "syz@gmail.com":{//if email was selected
      "name":"xyz"
   }
}

Thanks in advance.Please let me know if this question can be improved or illustrated in better way.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

I would go for a pure Angular component! It's pretty forward to solve.

First I would create a "MemberListComponent", just guessing from your object list. I would roughly create a component like to component below. I like to implement OnInit and OnDestroy. I don't know your setup, but you might be able to refactor more logic into the directive. I like to collect my subscribtions in OnInit and unsubscribe in OnDestory.

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/Rx';

@Component({
    selector:'memberlist',
    templateUrl:'memberlist.html',
    styleUrls: ['memberlist.scss']
})
export class MemberListDirective implements OnInit, OnDestroy {

    @Intput() members: Array<MemberModel>;
    @Output() clicked = new EventEmitter();

    constructor() {

    }

    ngOnInit() {

    }

    ngOnDestroy() {

    }

    memberClicked(type: string, member: MemberModel) {
       this.clicked.emit({
           type: type,
           member: member
       });
    }

}

In the template (memberlist.html), would I setup a click event and delegate the event to the subscribers.

<div *ngFor="let member of members">
    <div (click)="memberClicked('email',member)">{{member.lastname}}</div>
    <div (click)="memberClicked('mobile',member)">{{member.firstname}}</div>
</div>

The directive can then be used like this:

<memberlist [members]="members" (clicked)="memberlistClicked($event)"></memberlist>

Then in the component where the memberlist directive is used it simple to get the $event:

memberlistClicked(event) {
     console.log(event);
}

I haven't tested it, but this is roughly how you do it. You can read more about directive here: Angular.io directives I became aware that the question was about AngularJS, so here's a hint on how to solve it in AngularJS. I still love TS though.

Here an idea on how to create a directive, which can communicate with a controller:

app.directive('memberlist', () => {
    return {
        require: '^^someController',
        restrict: 'E',
        scope: {
            members: '=members',
        },
        templateUrl: '/templates/memberlist.html',
        link: function (scope, someController) {
            scope.memberClicked = (type, member) => {
                someController.currentMember = {
                    type: type,
                    member: member
                };
            }
        }
    };
});

The require statement is used so AngularJS knows to require 'someController'. Directive in AngularJS

Another way, I sometimes use(d) in AngularJS, is to broadcast an event and in a controller create an event listener. Here's a good explanation of how to use broadcast Broadcast events in AngularJS

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda