Question

我对angular指令几乎没有经验，并且我无法决定是否应该使用JQuery或angular 1指令。

我的对象列表如下：

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

这个列表我必须像

一样呈现

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

在呈现此列表后，我应该只允许用户选择电子邮件或移动设备，如果选择了其中任何一个，则应使用所选字段将特定对象标记为已选择。

任何人都可以解释我正确的方法来完成它或任何角度模块将根据要求完成它。所选数据也应如下所示返回：

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

提前致谢。如果能以更好的方式改进或说明这个问题，请告诉我。

Answer 1

我会选择一个纯粹的Angular组件！这是非常好的解决方案。

首先，我会创建一个“MemberListComponent”，只需从您的对象列表中猜测。我会粗略地创建一个类似下面组件的组件。我喜欢实现OnInit和OnDestroy。我不知道你的设置，但你可能能够在指令中重构更多的逻辑。我喜欢在OnInit中收集我的订阅并在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
       });
    }

}

在模板（memberlist.html）中，我是否会设置点击事件并将事件委托给订阅者。

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

然后可以像这样使用该指令：

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

然后在使用memberlist指令的组件中，只需获取$ event：

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

我还没有对它进行测试，但这大致就是你如何做到的。你可以在这里阅读更多关于指令： Angular.io directives 我意识到问题是关于AngularJS的，所以这里有一个关于如何在AngularJS中解决它的提示。我仍然喜欢TS。

这里有一个关于如何创建可以与控制器通信的指令的想法：

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
                };
            }
        }
    };
});

使用了require语句，因此AngularJS知道需要'someController'。 Directive in AngularJS

另一种方式，我有时在AngularJS中使用（d），就是广播一个事件，并在控制器中创建一个事件监听器。以下是如何使用广播Broadcast events in AngularJS

的一个很好的解释

在Angular js中使用指令或JQuery的更好方法

1 个答案: