控制器 - 工廠視圖同步

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> 

加載視圖後，select字段始終爲空。

我仍然在學習AngularJS的過程中，所以任何幫助將非常感激。

Answer 1

你是不是在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？我不認爲需要這個。

Answer 2

我已經看到了這幾個代碼錯誤。

1.您未添加納克控制器指令到視圖中。 https://docs.angularjs.org/guide/controller

2.newEmployee.supermarket在$ scope中缺失。請參閱角度文檔 https://docs.angularjs.org/api/ng/directive/ngModel

嘗試在視圖中打印響應 {{newEmployee.supermarket | json}}