javascript - AngularJS 从服务获取对象属性后访问它

Question

我有一个用于 AngularJS 应用程序的本地配置文件。它存储为本地 JSON 文件，并使用服务来获取其内容。一旦我加载文件，我就把它存储在一个对象中。现在我有一个范围 slider ，其值也存储在这个配置文件中。但我无法在回调之外访问对象的属性。如果我在回调之外记录对象，则记录对象会显示为未定义。最初，我使用 Angular 表达式作为 slider 元素中的属性，但这会引发 Angular 解析错误。如何在从服务调用它的函数之外访问配置属性？

<div class="col-md-11">
     <rzslider rz-slider-model="ageSlider.minValue"
               rz-slider-high="ageSlider.maxValue"
               rz-slider-options="ageSlider.options">
      </rzslider>
 </div>

HTML

  function getConfigData() {

    return Service.getConfigData().then(function(data){

        $scope.config = data;
        console.log("Config Data retrieved", $scope.config);

    })

}
getConfigData();

$scope.ageSlider = {
        minValue: 0,
        maxValue: 90,
        options: {
            floor: 0,
            ceil: 100,
            step: 1
        }
    };

JS:我想使用配置对象的属性来设置 slider 的最小值和最大值。

    function getConfigData() {
        return $http.get('/static/json/config.json')
            .then(getConfigDataSuccess);

        function getConfigDataSuccess(response) {
            var config = response.data;

            return config;
        }
    }

服务

Answer 1

updateAgeSlider({});
getConfigData();

////////////////////////////////////////////////////////////

function getConfigData () {
  ConfigService.get().then(updateAgeSlider);
}

function updateAgeSlider (config) {
  $scope.ageSlider = {
    minValue: config.options[0].min || 0,
    maxValue: config.options[0].max || 90,
    options: {
      floor: 0,
      ceil: 100,
      step: 1
    }
  };
}

和服务:

function get () {
  return $http.get('/static/json/config.json').then(success);

  function success (response) {
    return response.data;
  }
}

[编辑]多个 slider :

updateSliders();
getConfigData();

////////////////////////////////////////////////////////////

function getConfigData () {
  ConfigService.get().then(updateSliders);
}

function updateSliders (configSliders) {
  configSliders = configSliders || {};
  var allSliders = ['ageSlider'];

  for (var key in myExpectedSliders) {
    var sliderName = allSliders[key];
    $scope[sliderName] = getSliderConfig(configSliders[sliderName]);
  }
}

function getSliderConfig (configSlider) {
  configSlider = configSlider || {};
  return {
    minValue: configSlider.min || 0,
    maxValue: configSlider.max || 90,
    options: {
      floor: 0,
      ceil: 100,
      step: 1
    }
  };
}