2015-01-17 3 views
1

Я следил за Google documentation (прокрутка вниз) для начальной загрузки AngularJS с облачными конечными точками. Мой код выглядит следующим образом:

index.html

<!DOCTYPE html> 
<html ng-app="AnimalsApp"> 
<head> 
<meta charset="UTF-8"> 
<title>Animal Manager Server</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> 
<script src="js/animal.js"></script> 
<script src="https://apis.google.com/js/client.js?onload=init"></script> 
</head> 
<body> 
    <div ng-controller="MainCtrl" class="container"> 
    {{message}} world 
    </div> 
</body> 
</html> 

animal.js

angular.module('AnimalsApp', []) 
    .controller('MainCtrl', ['$scope', '$window', function($scope, $window) { 
    $scope.message = 'Hello'; 
    $window.init = function() { 
     $scope.$apply($scope.load_guestbook_lib); 
    }; 
    $scope.load_guestbook_lib = function() { 
     gapi.client.load('creatureCloud', 'v1', function() { 
     $scope.is_backend_ready = true; 
     $scope.message = 'Hello beautiful'; 
     console.log('Made it!'); 
     }, 'http://localhost:8888/_ah/api'); 
    }; 
    }]); 

function init() { 
    window.init(); 
} 

Текст Made it! отображается в журнале консоли, демонстрируя, что обратный вызов был выполнен , Однако установка $scope.is_backend_ready = true не влияет на отображение <div id="listResult" ng-controller="MainCtrl" class="container">. Это заставляет меня думать, что объект $scope в обратном вызове работает некорректно.

Что я сделал не так? Недействительны ли документы Google?

ответ

4

Ваше намерение использовать $scope.$apply() правильно, но это не в том месте. Вы должны сделать это в обратном вызове не из него. С помощью этого метода вы выполняете функцию load_guestbook_lib, а затем выполняете цикл дайджеста. Так как функция gapi.client.load является асинхронной, она запускается позже, и никакой дайджест не происходит, поскольку это происходит из углового контекста.

Try:

$window.init = function() { 
    $scope.load_guestbook_lib(); //Just invoke the function 
}; 
$scope.load_guestbook_lib = function() { 
    gapi.client.load('creatureCloud', 'v1', function() { 
    $scope.is_backend_ready = true; 
    $scope.message = 'Hello cats'; 
    console.log('Made it!'); 
    $scope.$apply(); //<-- Apply here 
    }, 'http://localhost:8888/_ah/api'); 
}; 
Смежные вопросы