Angular提供程序无法工作
Angular provider not working
我正在学习Angular中的服务。我试过服务和工厂,可以让他们工作,但我不能让供应商工作。我也检查了几个SO答案的解决方案,仍然不能让它工作
This is my provider:
app.provider('EmployeeService', function EmployeeServiceProvider() {
var list = [{
name: '',
skill: ''
}];
this.$get = function() {
return {
getList: function() {
return list
},
add: function(employee) {
list.push(employee);
}
};
}
})
我的控制器:
app.controller('MainCtrl', function($scope, EmployeeService) {
$scope.employee = {
name: '',
skill: ''
};
$scope.employees = EmployeeService.getList();
$scope.add = function(employee) {
EmployeeService.add(employee);
$scope.employee = {
name: '',
skill: ''
}
}
});
和app.js
var app = angular.module('myApp', []);
app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
var user = {
name: 'Rob',
skill: 'Hacker'
};
EmployeeServiceProvider.add(user);
}]);
我的html是:
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS app</title>
<script src="js'angular'angular.js"></script>
<script src="app'app.js"></script>
<script src="app'controllers'MainCtrl.js"></script>
<script src="app'services'EmployeeService.js"></script>
</head>
<body>
<div ng-controller='MainCtrl'>
<input type="text" ng-model="employee.name" placeholder="Enter employee name"/>
<input type="text" ng-model="employee.skill" placeholder="Enter employee skill"/>
<button ng-click="add(employee)">Add</button>
<hr>
<table>
<thead>
<tr>
<td>Name</td>
<td>Skill</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in employees">
<td>{{person.name}}</td>
<td>{{person.skill}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
我希望在配置中添加值,然后在HTML中提供它。但是我做不到。控制台也没有显示任何内容。请让我知道如何正确配置提供程序并在配置中使用它。
问题在您的provider
代码中。提供程序需要返回一个包含$get
属性的对象。简单地将$get
加入this
是行不通的。在$get
中,您需要返回控制器(即add()
和getList()
)使用的函数
您需要在两个地方保留add
函数:
首先,在提供者的return{ }
中(作为$get
的兄弟),因为您在config
函数中使用它。
app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
var user = {
name: 'Rob',
skill: 'Hacker'
};
EmployeeServiceProvider.add(user); //<-- Here
}]);
其次,您需要将add函数保留在$get
的返回中,因为您在控制器中使用它。
$scope.add = function(employee) {
EmployeeService.add(employee); <-- Here
$scope.employee = {
name: '',
skill: ''
}
}
提供程序的完整代码:
app.provider('EmployeeService', function EmployeeServiceProvider() {
var list = [{
name: '',
skill: ''
}];
return{
add: function(employee) { //This is for Config's visibility
list.push(employee);
},
$get:function(){
return{
add: function(employee) { // This is for controller's visibility
list.push(employee);
},
getList: function() {
return list
}
}
}
}
})
您还可以将方法($get
和add
)绑定到this
,而不是返回一个单独的对象
app.provider('EmployeeService', function EmployeeServiceProvider() {
var list = [{
name: '',
skill: ''
}];
this.add= function(employee) {
list.push(employee);
}
this.$get = function() {
return {
getList: function() {
return list
},
add: function(employee) {
list.push(employee);
}
};
}
})
这是工作活塞
相关文章:
- importScripts在web工作程序中返回未定义的
- 读取在具有IE的工作程序中生成的对象URL
- 使用web工作程序进行多个并发繁重计算
- Chrome没有加载最新版本的web工作程序脚本(运行缓存版本)
- web工作程序中不同的服务器请求行为
- Firebase推送通知-节点工作程序
- fetch事件处理程序中的fetch()未触发服务工作程序中的fetch事件
- Async.js队列工作程序未完成
- Web工作程序在处理大型数组时内存不足
- 附加组件生成器:使用端口的多个工作程序
- js web工作程序内存泄漏
- 在执行不区分大小写的排序以删除web工作程序中的重复项时,首选大写字母唯一
- Web工作程序在传递具有数组缓冲区的大型对象数组时会崩溃Chrome选项卡
- 从node.js派生出多个phantomjs工作程序是否理想
- 从web工作程序和主浏览器线程访问相同的websql数据库
- 没有web工作程序的Javascript后台处理
- 如何通过javascript工作程序显示循环进程状态
- 检测正在运行的javascript工作程序
- 正在检索web工作程序中所有变量的列表
- HTML5画布处理中Web工作程序内存不足