How do I define an Angularjs controller after a script has loaded?
Question
I am trying to "angularize" the code in this quickstart guide on how to use the google calendar api.
I have the following code. For now, I am just trying to have a page that says true if the user needs to be logged into google, and false if they already have.
<html ng-app="calApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script type="text/javascript">
var app = angular.module("calApp",[]);
app.controller('calController',function calController($scope){
gapi.auth.authorize({
'client_id': 'asdfghjkl123456',
'scope': 'https://www.googleapis.com/auth/calendar.readonly',
'immediate': true
}, function(authResult){
if (authResult && !authResult.error) {
$scope.needslogin = false;
}else{
$scope.needslogin = true;
}
});
});
</script>
</head>
<body ng-controller="calController">
{{needslogin}}
</body>
</html>
The problem is that the gapi.auth.authorize part gives me an error because it attempts to run before client.js has loaded.
The expected way to solve this is using a callback function. So I attempted
<script src="https://apis.google.com/js/client.js?onload=defineController"></script>
<script type="text/javascript">
var app = angular.module("calApp",[]);
function defineController(){
app.controller('calController',function calController($scope){
gapi.auth.authorize({
'client_id': 'asdfghjkl123456',
'scope': 'https://www.googleapis.com/auth/calendar.readonly',
'immediate': true
}, function(authResult){
if (authResult && !authResult.error) {
$scope.needslogin = false;
}else{
$scope.needslogin = true;
}
});
});
}
</script>
but now I get an error because the controller is not defined when <body ng-controller="calController"> attempts to run.
Any tips on how to properly do this would be appreciated.
2 answers
solution1
1 ACCPTED 2016-07-21 04:30:18
You can't define your controller after bootstrap
try
<script src="https://apis.google.com/js/client.js?onload=gapiBootCallback"></script>
<script type="text/javascript">
var gapiBootStrapper = {}; // an object that you can attach a callback function to in the controller
var app = angular.module("calApp", []).constant('gapiBootStrapper', gapiBootStrapper); // Passing it into Angular as a constant is not necessary but stop us using global from within a controller
function gapiBootCallback() {
gapi.auth.authorize({
'client_id': 'asdfghjkl123456',
'scope': 'https://www.googleapis.com/auth/calendar.readonly',
'immediate': true
}, function (authResult) {
if (authResult && !authResult.error) {
gapiBootStrapper.callback(false);
} else {
gapiBootStrapper.callback(true);
}
});
}
app.controller('calController', function calController($scope, $timeout, gapiBootStrapper) {
gapiBootStrapper.callback = function (needslogin) {
$timeout(function () { // Use $timeout so we don't need to call $scope.$apply
$scope.needslogin = needslogin;
});
};
});
</script>
solution2
0 2016-07-21 04:07:55
You can try to manually bootstrap your app in the call back
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("calApp",[]);
app.controller('calController',function calController($scope){
gapi.auth.authorize({
'client_id': 'asdfghjkl123456',
'scope': 'https://www.googleapis.com/auth/calendar.readonly',
'immediate': true
}, function(authResult){
if (authResult && !authResult.error) {
$scope.needslogin = false;
}else{
$scope.needslogin = true;
}
});
});
var callback = function() {
angular.bootstrap(document, ['calApp']);
};
</script>
<script src="https://apis.google.com/js/client.js?onload=callback"> </script>
</head>
<body ng-controller="calController">{{needslogin}}
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.