Question

我在工厂，控制器和视图之间的数据同步方面遇到了麻烦。发生的事情是在加载视图后初始化变量$ scope.supermarket。

我已经实施了这样的工厂：

var main_module = angular.module("myApp", ["ngRoute"]);
main_module.factory('dataFactory', ["$http", "$q", function($http, $q){

    var dataFactory = {};
    dataFactory.getSupermarkets = function(){
        var defer = $q.defer();
        $http.get("http://127.0.0.1:8000/supermarkets/")
            .then(function(response){
                defer.resolve(response.data);
             }, function(error){
                defer.reject(error);
             });

        return defer.promise;
    };

    dataFactory.getEmployees = function(){
        var defer = $q.defer();
        $http.get("http://127.0.0.1:8000/employees/")
            .then(function(response){
                defer.resolve(response.data);
            }, function(error){
                defer.reject(error);
            });

        return defer.promise;
    };

    return dataFactory;
}

这是我的控制器实现：

(function () {
'use strict';
var main_module = angular.module("myApp");

main_module.controller("EmployeeController", ["$scope", "$http", "dataFactory", function($scope, $http, dataFactory){

    $scope.employees = [];
    dataFactory.getEmployees().then(function(data){
            $scope.employees = data;
        }, function(error){
           lert(JSON.stringify(error));
        }
    );
    $scope.supermarkets = [];
    dataFactory.getSupermarkets().then(function(data){
            $scope.supermarkets = data;
        }, function(error){
            alert(JSON.stringify(error));
        }
    );
}]);

}());

使用$ scope.supermarket变量的视图部分是：

<div class="form-group">
    <label class="control-label col-sm-2">SUPERMARKET:</label>
    <div class="col-sm-5">
        <select class="form-control" ng-options="s.name in supermarkets" ng-model="newEmployee.supermarket"></select>
    </div>
</div>

加载视图后，选择字段始终为空。

我仍然在学习AngularJS，所以任何帮助都会非常感激。

Answer 1

您不是返回dataFactory中的本地dataFactory对象。

var main_module = angular.module("myApp", ["ngRoute"]);
main_module.factory('dataFactory', ["$http", "$q", function($http, $q){

    var dataFactory = {};
    dataFactory.getSupermarkets = function(){
        var defer = $q.defer();
        $http.get("http://127.0.0.1:8000/supermarkets/")
            .then(function(response){
                defer.resolve(response.data);
             }, function(error){
                defer.reject(error);
             });

        return defer.promise;
    };

    dataFactory.getEmployees = function(){
        var defer = $q.defer();
        $http.get("http://127.0.0.1:8000/employees/")
            .then(function(response){
                defer.resolve(response.data);
            }, function(error){
                defer.reject(error);
            });

        return defer.promise;
    };

    return dataFactory; // missing
}

与问题无关：为什么定义var main_module？我认为没有必要这样做。

Answer 2

我在这段代码中看到了几个错误。

1.您的ng-controller指令未添加到视图中。 https://docs.angularjs.org/guide/controller

$ p范围内缺少2.newEmployee.supermarket。请参阅角度文件 https://docs.angularjs.org/api/ng/directive/ngModel

尝试在视图中打印响应 {{newEmployee.supermarket | json}}

控制器 - 工厂 - 视图同步

2 个答案: