更好的方法是在Angular js中避免使用指令或JQuery。

17 浏览
0 Comments

更好的方法是在Angular js中避免使用指令或JQuery。

我在Angular指令方面缺乏经验,并且有一个场景,我无法决定是否应该使用JQuery还是Angular 1指令。

我有一个对象列表,像这样:

[

{

"id":"sdf34fsf345gdfg",

"name":"samson",

"phone":"9876543210",

"email":"abc@gmail.com"

},

{

"id":"sdf34fsf3432fg45gdfg",

"name":"xyd",

"phone":"9876543210",

"email":"xyz@gmail.com"

}

]

我需要将这个列表渲染成这样:

---姓名

|______邮箱

|______手机

|

---姓名

|______邮箱

|______手机

渲染完这个列表后,我应该只允许用户选择邮箱或手机,如果选择了其中一个,相应的对象应被标记为已选中。

有人能向我解释一下如何正确完成这个任务,或者是否有适合这个需求的Angular模块吗?

同时,选择的数据应以以下方式返回:

{

"9876543210":{ //如果选择了手机号码

"name":"samson"

},

"syz@gmail.com":{//如果选择了邮箱

"name":"xyz"

}

}

先行致谢。如果这个问题可以改进或以更好的方式说明,请告诉我。

0
0 Comments

更好的方法来对抗在AngularJS中使用指令或JQuery的问题

在AngularJS中,使用指令或JQuery可能会导致一些问题。为了解决这些问题,我们可以采用以下方法:

1. 创建一个纯Angular组件,例如"MemberListComponent"。你可以根据你的对象列表来创建这个组件。

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '/core';
import { Subscription } from 'rxjs/Rx';
@Component({
    selector:'memberlist',
    templateUrl:'memberlist.html',
    styleUrls: ['memberlist.scss']
})
export class MemberListDirective implements OnInit, OnDestroy {
    @Input() members: Array;
    @Output() clicked = new EventEmitter();
    constructor() {
    }
    ngOnInit() {
    }
    ngOnDestroy() {
    }
    memberClicked(type: string, member: MemberModel) {
       this.clicked.emit({
           type: type,
           member: member
       });
    }
}

2. 在模板(memberlist.html)中,设置一个点击事件并将事件委托给订阅者。

{{member.lastname}}
{{member.firstname}}

3. 在需要使用memberlist指令的组件中,可以通过以下方式获取$event:

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

这样就可以解决在AngularJS中使用指令或JQuery时可能出现的一些问题了。同时,你还可以通过阅读Angular官方文档了解更多关于指令的知识。

对于AngularJS的解决方法,你可以创建一个指令,它可以与控制器进行通信。你可以使用require语句来告诉AngularJS需要引入的控制器。

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

另一种在AngularJS中的解决方法是使用广播事件和事件监听器。你可以在控制器中创建一个事件监听器来处理广播的事件。你可以在以下链接中找到关于如何使用广播事件的更多信息。

感谢DNRN的建议,希望这些方法对你在AngularJS中解决问题有所帮助。

0