控制器 - 工厂视图同步

我在工厂，控制器和视图之间的数据同步时遇到问题。会发生什么是变量$ 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>

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

我仍然在学习AngularJS的过程中，所以任何帮助将非常感激。

来源

2015-09-13 Alen

控制台中的任何错误？你检查了网络标签，看看是否发送了超市的请求，并且它是否返回了一个非空数组？你有没有试过调试你的代码？请注意，您的承诺代码使用反模式。使用链接：'return $ http.get（'...'）。then（function（response）{return response.data;}）;' –

好吧，我按照你的建议重新实现了我的两个工厂方法， - 选项部分作为@Moncef Hassein-bey说，它现在起作用。谢谢！ – Alen

你是不是在returnig的的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？我不认为需要这个。

来源

2015-09-13 12:26:01

对不起，我忘了复制该行。它实际上在那里。我编辑了这个问题。我会删除该宣言行，谢谢。 – Alen

+1，@JB Nizet包含您的控制台错误。但是，我还可以看到ng选项中的另一个问题，它应该是这样的：ng-options =“s.name for s in supermarkets” –

我按照最后一条评论的建议编辑了视图。这是我的服务器响应： { “数据”：[{ “ID”：1， “名”： “超级市场”， “位置”： “在某处”}]， “状态”：200， “配置”： { “方法”： “GET”， “transformRequest”：[空]， “transformResponse”：[空]， “URL”： “http://127.0.0.1:8000/supermarkets/”， “标题”：{”接受 “：” 应用/ JSON，纯文本/，*/* “}，” 状态文本 “：” OK“} – Alen

我已经看到了这几个代码错误。

1.您未添加纳克控制器指令到视图中。 https://docs.angularjs.org/guide/controller

2.newEmployee.supermarket在$ scope中缺失。请参阅角度文档 https://docs.angularjs.org/api/ng/directive/ngModel

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

来源

2015-09-13 12:50:20 lmanohara

我使用$ routeProvider将控制器设置为视图。我提供的代码部分只是视图和控制器的一部分，因此实际上定义了newEmploye。 – Alen

控制器 - 工厂视图同步

回答

相关问题