2015-05-07 2 views
0

Я новичок в AngularJS, и у меня есть некоторые проблемы с использованием переменных области.AngularJS scope variable undefined

Вот пример кода. Я хотел бы знать, почему использование ng-repeat показывает значения $ scope.currencies, но когда я пытаюсь получить доступ из JS (console.log ($ scope.currencies)), он возвращает «undefined»

<!DOCTYPE html> 
 
<html> 
 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="appCtrl"> 
 

 
<ul> 
 
    <li ng-repeat="x in currencies"> 
 
    {{ x }} 
 
    </li> 
 
</ul> 
 

 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope, $http) { 
 
    $http.get("http://localhost:8080/currencies") 
 
    .success(function (response) {$scope.currencies = response;}); 
 

 

 
    console.log("currencies are "+$scope.currencies); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Я думаю, что есть что-то я получаю неправильно об областях, может кто-нибудь дать мне ключ?

+0

Ваш console.log работает до того, как ответ от $ http.get может запустить метод .success. В этот момент значения $ scope.currencies все еще не определены. –

+0

Вы ошибаетесь в отношении $ q/$ http/promises. – dizel3d

ответ

1

Ваш оператор console.log находится вне метода .success. Таким образом, он будет работать сразу. Вы должны поместить его внутрь .success метода, например:

var app = angular.module('myApp', []); 
app.controller('appCtrl', function($scope, $http) { 
    $http.get("http://localhost:8080/currencies") 
    .success(function (response) { 
     $scope.currencies = response; 
     console.log("currencies are "+$scope.currencies); 
    }); 
}); 

А также, попробуйте использовать $ log.debug() вместо console.log().

app.controller('appCtrl', function($scope, $http, $log) { 
... 
    .success(function (response) { 
     $scope.currencies = response; 
     $log.debug("currencies are "+$scope.currencies); 
+0

Спасибо за ответ. На самом деле я думаю, что я не был достаточно явным, я уже пробовал то, что вы предлагаете, и он работал хорошо, но я действительно хочу сделать доступ к $ scope.currencies в моем контроллере вне метода .success (я использовал консоль .log как тест). Я думаю, что я не очень хорошо понимал, как работают обещания, но на данный момент я был бы достаточно доволен, если бы просто понял, как получить доступ к $ scope.currencies из тела контроллера без необходимости использовать угловые директивы для этого. – mab

+1

Хорошо, позвольте мне попытаться помочь вам снова: вы можете использовать атрибут scope в любое время. Они должны быть связаны с элементами на вашем представлении (с использованием ng-данных). Угловой будет заботиться об обновлении любого элемента, привязанного к атрибуту, чтобы отразить любые изменения этого атрибута. Чтобы раскрыть это, вы можете просто поместить ' {{currencies}}' в любом месте вашей страницы, и вы увидите, что он автоматически меняется каждый раз, когда что-то меняет значение $ scope.currencies (как это было бы в методе .success) , –

+0

Таким образом, ваш console.log не будет работать, чтобы делать то, что вы ожидаете («смотреть» этот атрибут), потому что он будет запускаться сразу и только один раз. Он получит значение к моменту его запуска, но не после каких-либо изменений в атрибуте. –

Смежные вопросы