используя данные из обещания в угловом контроллере

Question

Внутри моего контроллера я звоню в свою службу, которая содержит массив данных, с которыми я хотел бы работать в DrinkLibrary. DrinkLibrary имеет метод getDrinks, который получает данные из моей базы данных.

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      var caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

Когда я называю success() я получаю данные, которые я хочу внутри caffeineData. Когда я звоню drinkSet(), я получаю данные, которые мне нужны внутри моей консоли браузера. В контроллере. Тем не менее, я ограничен caffeineData существует внутри метода drinkSet.

Есть ли лучший способ установить это, чтобы я мог использовать эти данные в диаграмме?

Answer 1

Где бы вы хотели найти data? Есть ряд вещей, которые вы можете сделать. Например:

app.controller('analysisController',function(Drink,DrinkLibrary,$rootScope,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      var caffeineData = data; // local only to this function 
      $scope.caffeineData = data; // local to this controller 
      $rootScope.caffeineData = data; // local to the application 
     }); 
    }; 
    drinkSet(); 
}); 

Ссылки:

https://docs.angularjs.org/guide/scope

https://docs.angularjs.org/api/ng/service/$rootScope

Answer 2

Поскольку caffeineData является локальной переменной, поэтому он не будет доступен в представлении. Вы должны установить данные в $scope, затем вы можете получить к нему доступ в своем представлении.

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      $scope.caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

Внутри вид. На основе типа объекта caffeineData вы можете добавить свою логику в представление.

<div>{{caffeineData}}</div> 

Вы можете узнать больше о угловом объеме здесь https://docs.angularjs.org/guide/scope

Demohttp://plnkr.co/edit/s8mWpCTV6bvxmR3hOLOM?p=preview

Answer 3

Вы можете привязать данные к контроллеру $scope и использовать его в HTML

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var loadDrinks = function(){ 
    DrinkLibrary.getDrinks().success(function(data){ 
     $scope.caffeineData = data; 
    }); 
    }; 
    loadDrinks(); 
}); 

HTML

<ul ng-controller="analysisController"> 
    <li ng-repeat="drink in caffeineData"> 
     <label ng-bind="drink.name"></label> 
    </li> 
</ul> 

Answer 4

Если вам нужно использовать данные ответа вне этой функции, сначала попробуйте создать экземпляр переменной, прежде чем определять функцию drinkSet. Предполагая, что данные, которые будут установлены в caffeineData массив, например:

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var caffeineData = []; // could also set via $scope.caffeineData 
    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

По инстанцированию его вне функции, она не будет приватная функции (JS имеет function level scope for variables). Преимущество здесь в том, что, если что-либо настроено для создания в DOM из yoru caffeineData var, вы можете построить его правильно над пустым массивом, прежде чем он будет заполнен.

Есть еще одно улучшение, которое мы можем сделать для вашего контроллера здесь, предполагая, что в вашем обратном вызове успеха ничего не происходит, кроме заданных данных; имеет вид:

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var caffeineData = []; // could also set via $scope.caffeineData 
    DrinkLibrary.getDrinks().success(function(data){ 
     caffeineData = data; 
    }); 
}); 

Как Ваше желание использовать эти данные в таблице, вы можете определить вашу диаграмму инициирования вызова внутри обратного вызова успеха, только вызвать функцию диаграммы здания на успешной настройке ваших данных.

---

[Редактировать] За мой комментарий, вот обновленная версия, которую я предлагаю вам попробовать. Вы заметите, что я положил console.log внутри обратные вызовы успеха/ошибки, чтобы гарантировать, что ваш дамп на консоли после того, как обетование разрешилось, в любом случае. Я включил комментарии и дополнительные параметры обратного вызова, как показано в $http.get example from the AngularJS docs, в котором в комментариях говорится конкретно об асинхронном характере обещаний.

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    $scope.caffeineData = []; // could also set via $scope.caffeineData 
    DrinkLibrary.getDrinks() 
     .success(function(data, status, headers, config){ 
      // this callback will be called asynchronously 
      // when the response is available 
      $scope.caffeineData = data; 
      console.log("Response code of the GET was: "+status); 
      console.log("Data received: "+data); 
     }).error(function(data, status, headers, config) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     $scope.caffeineData = null; //no data :'-(
     console.log("data: " + data); 
     console.log("status: " + status); 
     //console.log("headers: " + headers); 
     //console.log("config: " + JSON.parse(config)); 
     }); 
}); 

[/ Edit]