Question

我正在学习Angular的服务。 T试过服务和工厂，可以让他们工作，但我无法让供应商工作。我检查了几个SO答案的解决方案，仍然无法使其工作

这是我的提供者：

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>

我希望在配置之前在配置中添加值。但我无法做到。控制台中也没有显示任何内容。请告诉我如何正确配置提供程序并在配置中使用它。

Answer 1

问题出在您的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

}]);

其次，您需要将添加功能保留在$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);
            }
        };
    }  

})

这是工作plunkr

角度提供者不工作

1 个答案: