有没有一种方法可以在不手动启动 Angular 的情况下初始化 Angular 和端点?
我以为我找到了一个优雅的解决方案 here .
对我来说不幸的是,尽管脚本的顺序不同,window.init 并不总是在回调调用之前声明。它在刷新时工作正常,但并不总是在首页加载时工作。控制台输出“Uncaught TypeError: Object [object global] has no method 'init'”。
最后,我尝试从端点回调手动引导 Angular(例如 here ,但在尝试此操作时,它导致了 Angular 应该替换 Handlebars 占位符的滞后,因此 html 充满了 Handlebars 几秒钟。我感谢这可能是执行此操作的唯一方法,但是上面来自 google 的第一个链接表明不然。
更新:
function customerInit(){
angular.element(document).ready(function() {
window.init();
});
}
这似乎解决了我的问题,它强制 Angular Controller 在端点之前初始化。谷歌页面上没有提到这一点,但似乎有必要强制执行初始化顺序。
hmtl:
<html ng-app lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/customer.js"></script>
<script src="https://apis.google.com/js/client.js?onload=customerInit"></script>
</head>
<body>
<div class="container" ng-controller="customerCtrl">
<div class="page-header">
<h1>Customers</h1>
</div>
<div class="row">
<div class="col-lg-10">
<table id="customerTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Surname</th>
<th>Email Address</th>
<th>Home Phone</th>
<th>Mobile Phone</th>
<th>Work Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in allCustomers">
<td>{{customer.firstName}}</td>
<td>{{customer.surName}}</td>
<td>{{customer.emailAddress}}</td>
<td>{{customer.homePhone}}</td>
<td>{{customer.mobilePhone}}</td>
<td>{{customer.workPhone}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
</body>
</html>
客户.js:
function customerInit(){
window.init();
}
function customerCtrl ($scope) {
window.init= function() {
$scope.$apply($scope.load_customer_lib);
};
$scope.is_backend_ready = false;
$scope.allCustomers = [];
$scope.load_customer_lib = function() {
gapi.client.load('customer', 'v1', function() {
$scope.is_backend_ready = true;
$scope.getAllCustomers();
}, '/_ah/api');
};
$scope.getAllCustomers = function(){
gapi.client.customer.customer.getCentreCustomers()
.execute(function(resp) {
$scope.$apply(function () {
$scope.allCustomers = resp.items;
});
});
};
};
最佳答案
这整理了我的启动顺序:
function customerInit(){
angular.element(document).ready(function() {
window.init();
});
}
ng-cloak 指令阻止我看到一闪而过的未解析的 Angular 指令。
关于angularjs - 启动 AngularJS + 云端点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18403604/