$http在工厂内所做的数据更改不会反映到DOM中

Question

我正在尝试创建一个基于对象的动态表单。例如:我希望生成的选择框将包含选项(如果给定)，否则工厂将使用ajax获取它们，如下所示：

标记：

<select ng-repeat="select in selects"
        ng-init="options = refactor.options(select)"
        ng-options="option in options">
</select>

控制器：

myApp.controller('MyCtrl', function($scope, refactor) {
   $scope.refactor = refactor;
   $scope.selects = [
          { text: "Country", value="chosen.country", options=["France", "England"] },
          { text: "Gender", value="chosen.gender", options="/gender" }
        ]
});

工厂：

myApp.factory('refactor', function($scope, $http) {
  return {
    options: function(select) {
      if(typeof(select.options) === 'object') { return select.options };
      // otherwise assume select.options is 
      // a path to fetch options by ajax:
      $http.get(select.options).success(function(data) {
         select.options = data; // data == ['male', 'female']
      });

      return []; // placeholder until promise is fulfilled
    }
  }
})

数据( $scope.selects )会按预期更新，而DOM却不会，这可能意味着不会再次调用refactor.options()来响应更改。我试图通过将scope对象传递给工厂并在其上调用$apply来强制更新，但它不起作用。

我遗漏了什么？

Answer 1

您需要使用ng-init="data = refactor.options(select)"，以便从ajax获取数据后，数据将用options填充，然后您可以使用ng-options as而不是ng-options="option in data.options"。

标记

<select ng-repeat="select in selects"
    ng-init="data = refactor.options(select)"
    ng-options="option in data.options">
</select>

Answer 2

你应该试试这个

myApp.factory('refactor', function($scope, $http) {

return {
    options: function(select) {
               var menuItems={
                     options:[]
                  }

                if(typeof(select.options) === 'object'){
                   menuItems.options=select.options
                };

               // otherwise assume select.options is 
               // a path to fetch options by ajax:

               $http.get(select.options).success(function(data) {
                    select.options = data; 
                    menuItems.options=data;// data == ['male', 'female']
               });

               return menuItems; // placeholder until promise is fulfilled
            }
       }
});

那么在你的视图中它应该是这样的

<select ng-repeat="select in selects"
    ng-init="menuItems= refactor.options(select)"
    ng-options="option in menuItems.options">
</select>