我一直在开发一个使用 CakePHP 3 构建的 Web 应用程序，该应用程序将文本行存储在 Firebase 的实时数据库中。一旦 Controller 的端点之一收到请求，它就会开始将数据推送到数据库。与此同时，我希望看到这些文本行被一行一行地显示在页面上。
到目前为止，我已经可以处理请求过程，现在我可以将数据发送到我的网页。我可以跟踪从浏览器控制台和 html 输出发送的文本。然而，我一直坚持在前端安装 AngularJS，所以任何关于这个主题的帮助将不胜感激。
就目前情况而言，由于我无法构建 AngularJS，因此当我使用下面的行时，我看不到页面上的任何更改:
document.getElementById("demo").innerHTML = data.val();
由于网络上有许多文档，其中大部分已经过时，因此我很难找到可以使用的有用信息。我非常感谢对此的任何帮助。
src/Template/Visits/code.ctp:
<!DOCTYPE html>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<html lang="en">
<body>
<p id="demo"></p>
<script>
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
storageBucket: "...",
};
firebase.initializeApp(config);
var codeRef = firebase.database().ref('code/');
codeRef.on('child_added', function(data) {
console.log(data.val());
//document.getElementById("demo").innerHTML = data.val();
//document.getElementById("demo").innerHTML = "<br>";
// document.write(data.val());
// document.write("<br>");
window.scrollBy(0,50); // scroll to make sure bottom is always visible
});
</script>
</body>
src/Template/Layout/code.ctp:
<!DOCTYPE html>
<html lang="en">
<?php echo $this->Html->css('style'); ?>
<head>
<br>"Push the button!"</br>
</head>
<body>
<!-- Page Content -->
<div id="content" class="container">
<?= $this->Flash->render() ?>
<div class="row">
<?= $this->fetch('content') ?>
</div>
</div>
</body>
</html>
最佳答案
嗯，我设法想出了一个解决方案，但我确信还有很多其他解决方案。需要声明应用，之前明显没有。
src/Template/Visits/code.ctp:
<!DOCTYPE html>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<html lang="en">
<body>
<p id="demo">Push the button...</p>
<div ng-app="MyModule" ng-controller="MyController"></div>
<script>
//------- Initialize Firebase ---------------
var config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DB_URL",
storageBucket: "YOUR_STORAGE_BUCKET",
};
firebase.initializeApp(config);
var codeRef = firebase.database().ref('code/');
//------- Application Module ----------------
var app = angular.module('MyModule', []);
document.getElementById("demo").innerHTML = "";
app.controller("MyController", ["$scope", function($scope) {
codeRef.on('child_added', function(data) {
console.log(data.val());
document.getElementById("demo").innerHTML += data.val();
document.getElementById("demo").innerHTML += "<br>";
window.scrollBy(0,50); // scroll to make sure bottom is always visible
});
}]);
</script>
</body>
</html>
关于javascript - 在 CakePHP 3 中使用 AngularJS 从 Firebase 检索数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38016572/