Fatal编程技术网
  • javascript/
  • Javascript 在特定位置显示来自Firebase的信息

Javascript 在特定位置显示来自Firebase的信息

javascript angularjs firebase

Javascript 在特定位置显示来自Firebase的信息,javascript,angularjs,firebase,firebase-realtime-database,Javascript,Angularjs,Firebase,Firebase Realtime Database,我用bootstrap列制作了一个示例html页面。在列中，有必要在特定位置插入文本（来自Firebase） 例如：我想在第3列插入“test” 为此，我使用“currentMessage”字段和“location”字段创建Firebase 到目前为止，我使用javascript保存和显示来自Firebase的信息。另外，我在代码AngularJS中使用了两条消息（只是为了学习…） 以下是我的index.html代码： <!DOCTYPE html> <html ng-app=

我用bootstrap列制作了一个示例html页面。在列中，有必要在特定位置插入文本（来自Firebase）

例如：我想在第3列插入“test”

为此，我使用“currentMessage”字段和“location”字段创建Firebase

到目前为止，我使用javascript保存和显示来自Firebase的信息。另外，我在代码AngularJS中使用了两条消息（只是为了学习…）

以下是我的index.html代码：

<!DOCTYPE html>
<html ng-app="root">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Grid</title>
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <!--FOR ANGULAR JS-->
  <script src="root.js"></script>
  <script src="services.js"></script>
  </head>
    <!--END ANGULARJS -->
  </head>
  <body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<div class="container-fluid">
  <div class="header">  
      <div class="row">
        <div ng-app="root">
              <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" > <div ng-controller="Ctrl1"><center>{{message}}</center></div> </div>


              <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 blue9" > <div ng-controller="Ctrl2"><center>{{message}}</center></div></div> 
        </div>
      </div>
  </div>

  <div class="content">
    <div class="top-content">
      <div class="row">
        <div ng-app="root">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" ><div ng-controller="Ctrlocation">{{message}}</div></div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
        </div>
        </div>
      </div>
  </div>

  <div class="content">
    <div class="top-content">
      <div class="row">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
        </div>
        <div class="row">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
          <div class="col-xs-6 col-sm-9 col-md-6 col-lg-6 blue" >.col-md-6</div>
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
        </div>
        <div class="row">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
        </div>
      </div>
  </div>

  <div class="bottom-content">
      <div class="row">

          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 red12" >

               <div id="lblCurrentMessage" class="text-center"></div>


        </div></div>

</div>
<br><br>
<div class="form-group">
          <input type="text" id="txtNewMessage" cass="form-control">
          <button id="btnUpdateMessage" class="btn btn-primary">Add Text</button>
          <br><br>
          <input type="text" id="txtNewMessage2" cass="form-control">
          <button id="btnUpdateLocation" class="btn btn-primary">Add Location</button>
          </div>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script>
  var lblCurrentMessage = document.getElementById('lblCurrentMessage'), 
  txtNewMessage = document.getElementById('txtNewMessage'),
  txtNewMessage2 = document.getElementById('txtNewMessage2'),
  btnUpdateMessage = document.getElementById('btnUpdateMessage');
  btnUpdateLocation = document.getElementById('btnUpdateLocation');
  rootRef = new Firebase('https://web-quickstart-8326d.firebaseio.com/'),
  currentMessageRef = rootRef.child('currentMessage');
  locationRef = rootRef.child('location')

btnUpdateMessage.addEventListener('click', function(){
    currentMessageRef.set(txtNewMessage.value);
    txtNewMessage.value='';

  });
btnUpdateLocation.addEventListener('click', function(){
    locationRef.set(txtNewMessage2.value);
    txtNewMessage2.value='';

  });

currentMessageRef.on('value', function(snapshot){
txtNewMessage.value='';
});
currentMessageRef.on('value',function(snapshot){
lblCurrentMessage.innerText = snapshot.val();

});

</script>
<!--AngularJS scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
  <script src="root.js"></script>
  <script src="services.js"></script>
    <!--END ANGULARJS -->
</body>
</html>
我需要如何实现此功能的想法/帮助。（在我的网站的特定位置插入文本）

我认为使用AngularJS是必要的，但我是新手，不知道如何做到这一点

我试着做一个控制器，像这样：

root.controller('Ctrlocation', function($scope){

      if($scope.location=txtNewMessage2.value){
        $scope.message = txtNewMessage.value='';
      }
    });
但是，它不起作用，我不知道在我的索引中需要在哪里插入
ng controller

谢谢你的帮助

root.controller('Ctrlocation', function($scope){

      if($scope.location=txtNewMessage2.value){
        $scope.message = txtNewMessage.value='';
      }
    });