Question

我正在用纯HTML和AngularJS编写一个简单的MVC模式，我已经成功制作了一个控制器。我一直遵循以下指南：

http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service

现在我的下一个目标是建立一个提供数据的工厂。

我按如下方式组织了我的文件： - shell页面名为＆＃39; index.html＆＃39; - 带有＆＃39; angular.min.js＆＃39;的核心库。和＆＃39; angular-route.min.js＆＃39; - 观点，控制器和工厂

路由工作正常，并通过显示他们的HTML给我视图。到目前为止，硬编码数据为我提供了与我的<div ng-view></div>绑定的数据。

这是我的HTML的一部分。我认为它可能与我的* .js文件的引用顺序有关：

<body>
    <!-- Placeholder -->
    <div ng-view></div>

    <!-- Core libs -->
    <script type="application/javascript" src="scripts/angular.min.js"></script>
    <script type="application/javascript"  src="scripts/angular-route.min.js"></script>

    <!-- Routing -->
    <script type="application/javascript" src="app/app.js"></script>

    <!-- Custom scripts -->
    <script type="application/javascript" src="app/factories/characterFactory.js"></script>
    <script type="application/javascript" src="app/controllers/characterController.js"></script>

</body>

在我的app.js＆＃39;文件我有我的路由逻辑，工作正常......

这是我的视图页面，当使用来自我的控制器的硬编码数据时，它也正常工作：

<b>Here is the characterlist page</b>

    <div data-ng-controller="characterController">
        <table>
            <tbody>
                <tr data-ng-repeat="character in characters| orderBy:['status','points']:true">
                    <td><a href="character.html?id={{ character.id }}">{{ character.name }}</a></td><td>{{ character.city }} | {{ character.age }} years | {{ character.points }} | {{ character.status }}</td>
                </tr>
            </tbody>
        </table>
    </div>

现在我已经在我的数据库中对我的数据进行了硬编码＆＃39; 以下是我的＆＃39; dataFactory＆＃39;的代码：

var app;
app.factory('dataFactory', ['$http', function ($http) {
    'use strict';
    var dataFactory = {};
    //alert('it works until here')
    dataFactory.getCharacters = function () {
        var characters = [
            {id: '1', name: 'Luke', points: '30', city: 'Berlin', status: 'online', age: '38'},
            {id: '2', name: 'Peter', points: '40', city: 'Stockhom', status: 'online', age: '28'},
            {id: '3', name: 'Scully', points: '50', city: 'Paris', status: 'offline', age: '18'},
            {id: '4', name: 'Vader', points: '20', city: 'London', status: 'online', age: '26'},
            {id: '5', name: 'Skywalker', points: '10', city: 'Malmö', status: 'offline', age: '14'}
        ];
        return characters;
    };
}]);

我一直试图找出为什么我一直在我的＆＃39; dataFactory＆＃39;上得到一个未定义的错误。对象

这是我的控制器代码：

var app;
app.controller('characterController', ['$scope', '$http', 'dataFactory', function ($scope, $http, dataFactory) {
    'use strict';
    dataFactory.getCharacters().then(function (res) {
        $scope.characters = res.data.result;
    });
}]);

当我使用Firebug的javascript控制台时出现此错误：

错误：dataFactory未定义

任何人都可以了解我所缺少的内容吗？

Answer 1

其中最重要的几个问题是：

您的工厂没有退货！

您在工厂的函数中返回characters，但不从实际工厂返回对象datafactory。

app.factory('dataFactory', ['$http', function ($http) {
    'use strict';
    var dataFactory = {};
    /* add properties, methods etc to the object  */

     /* return the object from factory*/
     return datafactory;
})

一旦您解决了这个问题，您将退货作为承诺处理，但工厂中没有承诺。

因此你可以简单地做

$scope.characters =  dataFactory.getCharacters();

如果您的getCharacters()方法是异步的，那么这将不起作用，然后您将返回类似$ htp，$ resource等涉及承诺的内容

Answer 2

在您的工厂中，您可以返回一个承诺，您可以在控制器中使用.then(response)解决此承诺

app.factory('dataFactory', ['$http', function ($http) {

    function getCharacters() {
        return $http.get(//.. ajax details)
    }

    return {
        'getCharacters': getCharacters
    }
}]);

Answer 3

你刚刚错过了一份回复声明：

var app;
app.factory('dataFactory', ['$http', function ($http) {
    'use strict';
    var dataFactory = {};
    //alert('it works until here')
    dataFactory.getCharacters = function () {
        var characters = [
            {id: '1', name: 'Luke', points: '30', city: 'Berlin', status: 'online', age: '38'},
            {id: '2', name: 'Peter', points: '40', city: 'Stockhom', status: 'online', age: '28'},
            {id: '3', name: 'Scully', points: '50', city: 'Paris', status: 'offline', age: '18'},
            {id: '4', name: 'Vader', points: '20', city: 'London', status: 'online', age: '26'},
            {id: '5', name: 'Skywalker', points: '10', city: 'Malmö', status: 'offline', age: '14'}
        ];
        return characters;
    };

    return dataFactory; // <- here

}]);

请注意，您未使用承诺，因此不允许您这样做：

dataFactory.getCharacters().then(...)

获取变量的正确方法是：

var chs = dataFactory.getCharacters(); // then use it

除非您使用angular $q实施工厂。

我在angularJs中的dataFactory收到一个未定义的错误

3 个答案: