Question

我一直在避免在这里问这个，因为那里有很多例子，但我不知道我做错了什么。我正在尝试使用一个小角度的应用程序，但我正在努力让它通过基础知识。

我希望得到一些CRUD，但使用合理的干净结构，我可以将其用作其他应用程序的模板。我找到了数以百万计的例子，但只使用了控制器，我发现了数百万个关于如何实现和DI服务的例子。我现在正试图把它们放在一起，但没有快乐。

我们走了。

我有一个简单的 accounts.html

<h1>Accounts</h1>

<div ng-controller="AccountController">
    <div>
        <table>
            <tr>
                <td>Name</td>
                <td>Description</td>
                <td>number</td>
                <td>accountType</td>
                <td>Delete</td>
            </tr>

            <tr ng-repeat="acct in accounts">
                <td>{{acct.name}}</td>
                <td>{{acct.description}}</td>
                <td>{{acct.number}}</td>
                <td>{{acct.accountType}}</td>
                <td>{{delete(acct)}}</td>
            </tr>
        </table>
    </div>

    <hr>

    <div>
        <div>
            Name:<input type="text" ng-model="account.name">
        </div>
        <div>
            Description:<input type="text"
                ng-model="account.description">
        </div>
        <div>
            Number:<input type="text" ng-model="account.number">
        </div>
        <div>
            Account Type:<select ng-model="account.accountType">
                <option ng-repeat="acctType in accountTypes">{{acctType}}</option>
            </select>
        </div>
    </div>  

    <div>
        <input type="button" value="Save" ng-click="save()">
        <input type="button" value="Cancel">
    </div>
</div>

<!-- Angular JS -->
<script src="assets/thirdparty/angular/1.4.8/js/angular.js"></script>

<!-- App Angular JS -->
<script src="assets/local/js/angular/accounts-app.js"></script>
<script src="assets/local/js/angular/controller/AccountController.js"></script>
<script src="assets/local/js/angular/service/RefDataService.js"></script>

AccountController.js

(function() {

'use strict';

var app = angular.module('accounts-app', ['account-service']);
app.controller('AccountController', ['$scope', 'RefDataService', function($scope, RefDataService) {

    $scope.accountTypes = RefDataService.refData.accountTypes;

    var account = {
        'name' : '',
        'description' : '',
        'number' : '',
        'accountType' : ''
    };

    $scope.account = account;
    $scope.accounts = [];

    $scope.save = function save() {
        $scope.accounts.push(this.account);
        $scope.account = {
            'name' : '',
            'description' : '',
            'number' : '',
            'accountType' : ''
        };

    };

}]);

})();

RefDataService.js

(function() {

    'use strict';

    var serviceModule = angular.module('account-service', []);

    serviceModule.service ('RefDataService', ['$http', 
        function($http) {
            var url = 'http://localhost:8080/accounts-rest/api/refdata';

            var refData = {};

            refData.accountTypes = {};
            refData.accountTypes = function() {
                return $http.get(url + '/accounttypes');
            }

            return refData;

    }]);
})();

我正在尝试从其余部分加载帐户类型并填充选择下拉列表。我已经尝试并改变了我能做到的一切，但是我得到了一个控制台错误或者没有错误，但是还有一个空的下拉列表。

理想情况下，在实际应用程序中，此refDataService将加载，如名称所示，引用数据。关于如何改进它的建议值得欢迎。

Answer 1

您尝试将accountTypes用作对象/数组：

$scope.accountTypes = RefDataService.refData.accountTypes;

...但您已将其定义为控制器中的一项功能：

refData.accountTypes = function() {
    return $http.get(url + '/accounttypes');
}

此外，您似乎期望$http.get()直接返回数据 - 它实际上会返回一个承诺，并将请求的响应作为参数。你需要像这样使用它（假设你的REST调用返回你需要的对象）：

$http.get(url + "accounttypes").then(function (response) {
    refData.accountTypes = response;
});

Answer 2

这是working plunker。

app.controller('AccountController', ['$scope', 'RefDataService', function($scope, RefDataService) {
RefDataService.accountTypes().then(function(response){
  $scope.accountTypes = response;
});

$scope.account = {
    'name' : '',
    'description' : '',
    'number' : '',
    'accountType' : ''
};
$scope.accounts = [];

$scope.save = function save() {
    $scope.accounts.push($scope.account);
    $scope.account = {
        'name' : '',
        'description' : '',
        'number' : '',
        'accountType' : ''
    };

};

}]);

var serviceModule = angular.module('account-service', []);

serviceModule.service ('RefDataService', ['$http',
    function($http) {
        var url = 'http://localhost:8080/accounts-rest/api/refdata';

        this.accountTypes = function() {
            return $http.get(url + '/accounttypes');
        }
}]);

我改变的事情：

您的RefDataService声明看起来更像工厂而不是服务（您应该阅读示例[此处]的差异）（AngularJS: Service vs provider vs factory）。 Module.service期望使用new运算符调用注入的构造函数，因此我在此处附加accountTypes方法
在您的控制器中，您可以使用Joe Clay在答案中描述的服务
我将$scope.accounts.push(this.account);修改为$scope.accounts.push($scope.account);。如果您使用controllerAs syntax。

this.account

angularjs - 控制器服务休息呼叫

2 个答案: