脚本加载后如何定义Angularjs控制器？
[英]How do I define an Angularjs controller after a script has loaded?
问题描述
I am trying to "angularize" the code in this quickstart guide on how to use the google calendar api. 
我正在尝试将本快速入门指南中的代码“角度化”，以了解如何使用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. 现在，我只是想有一个页面，说true ，如果用户需要登录到谷歌和false如果他们已经有了。
<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. 问题是gapi.auth.authorize部分给我一个错误，因为它尝试在加载client.js之前运行。
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. 但是现在出现错误，因为在<body ng-controller="calController">尝试运行时<body ng-controller="calController"> 。
Any tips on how to properly do this would be appreciated. 有关如何正确执行此操作的任何提示将不胜感激。
2 个解决方案
解决方案1
1 已采纳 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>
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.