angularjs - 工厂内部 $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() 没有再次调用以响应更改。我试图通过将范围对象传递给工厂并在其上调用 $apply 来强制更新，但它不起作用。

我错过了什么？

Answer 1

您需要使用ng-init="data = refactor.options(select)"so 从数据中获取ajax数据后将被填满，options然后您可以使用ng-optionsas 而不是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>