Best approach to using directive or JQuery in Angular js
I have little experience with angular directive and have a scenario where I can't decide whether to use JQuery or angular 1 directive.
I have a list of objects, for example:
[
{
"id":"sdf34fsf345gdfg",
"name":"samson",
"phone":"9876543210",
"email":"abc@gmail.com"
},
{
"id":"sdf34fsf3432fg45gdfg",
"name":"xyd",
"phone":"9876543210",
"email":"xyz@gmail.com"
}
]
this list i need to do as
---Name
|______email
|______mobile
|
---Name
|______email
|______mobile
After rendering this list, I have to allow the user to select only email or mobile, and if any of them is selected, the specific object should be marked as selected with its selected field.
Can anyone explain to me the correct approach to do this or some angular module to be executed as per requirement. Also the selected data should be returned as follows:
{
"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 a better way.
source to share
I would go with a pure Angular component! This is quite difficult to solve
First I would create a "MemberListComponent" just by guessing from your list of objects. I would roughly create a component similar to the component below. I like to implement OnInit and OnDestroy. I don't know your setup, but you can refactor more logic into a directive. I like to collect my subscriptions 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) I would set the click event and pass 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>
Then the directive can be used like this:
<memberlist [members]="members" (clicked)="memberlistClicked($event)"></memberlist>
Then, in the component using the memberlist directive, just get $ event:
memberlistClicked(event) {
console.log(event);
}
I haven't tested it, but this is roughly how you do it. You can read more about the directive here: Angular.io directives I realized the question was about AngularJS, so here's a hint on how to solve it in AngularJS. I still love TS, though.
Here's an idea on how to create a directive that 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 that AngularJS knows it needs "someController". AngularJS directive
Another way I sometimes use (d) in AngularJS is to broadcast an event and create an event listener in the controller. Here is a good explanation on how to use event broadcasts in AngularJS
source to share