Javascript 如何创建单独的数据范围及其应用的过滤器？安格拉斯

我在练习AngularJS，我在尝试做一个可重用的组件， 在这一步之前，我是用指令方法创建的，我的疑问是：

如何将数据集分离为对服务器的json调用？（$http.get）

如何使用输入文本筛选当前控件

var-app=angular.module（“app”，[]）；
app.directive（'list'，function（）{
返回{
限制：'E'，
范围：{
列表：'=set'
},
替换：正确，
控制器：函数（）{}，
controllerAs:'ctrl'，
bindToController：对，
模板：布局
}
});
//模板（html）
变量布局=“”+
''+
“
”+
“
”+
“{item.name}”+
“
”+
“
”
ul{
列表样式类型：无；
maring:0px；
填充：0px；
}
ul>li{
背景色：天蓝色；
宽度：200px；
填充物：5px10px；
边缘底部：5px；
}
输入[type=“text”]{
宽度：220px；
高度：20px
}

清单1
清单2
要从API获取用户，只需创建一个返回数据的API

app.service('userService', function($http) {
  this.getUser = function() {
    return $http.get('https://randomuser.me/api/').then(function(list) {
      return list.data.results;
    });
  }
});

将此服务注入指令中

app.directive('list', function(userService)

将结果保存在链接函数内的变量中

link: function (scope)

要过滤列表，您可以使用下面帖子中的过滤器




或者，如果名称包含您在输入中写入的字符串，则只显示li元素（请参见下面的代码段）


var-app=angular.module（“app”，[]）；
应用程序指令（'list'，函数（userService）{
返回{
限制：'E'，
作用域：{}，
替换：正确，
模板：布局，
链接：功能（范围）{
scope.users=[]；
userService.getUser（）.then（函数（用户）{
scope.users.push（{name:users[0].name.first}）；
});
}
}
});
变量布局=“”+
''+
“
”+
“
”+
“{item.name}”+
“
”+
“
”；
app.service（'userService'，函数（$http）{
this.getUser=函数（）{
返回$http.get（'https://randomuser.me/api/）。然后（函数（列表）{
返回列表、数据、结果；
});
}
});
ul{
列表样式类型：无；
maring:0px；
填充：0px；
}
ul>li{
背景色：天蓝色；
宽度：200px；
填充物：5px10px；
边缘底部：5px；
}
输入[type=“text”]{
宽度：220px；
高度：20px
}

清单1
清单2