better approach against using directive or JQuery in Angular js

Question

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.

Answer 1

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