AngularFire Example

by dirkk0

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://firebase.github.io/angularFire/angularFire.js"></script>
<body ng-controller="Chat">
  <div>
    <label for="">Your name: </label><input id="name" type="text" ng-model="username">
  </div>
  <p></p>
  <div id="messagesDiv" auto-scroll="messages" style="height:200px;">
    <div ng-cloak ng-repeat="message in messages">
      <em>{{message.from}}: </em>{{message.content}}
    </div>
  </div>

    <input id="message" type="text" ng-model="message" placeholder="Message...">
    <button id="send" ng-click="addMessage()" style="font-size:24px;">

</body>

JavaScript

angular.module('chat', ['firebase'])
  .controller('Chat', ['$scope', '$timeout', 'angularFireCollection',
    function($scope, $timeout, angularFireCollection) {
      var url = 'https://angularFire.firebaseio-demo.com/chat';
      $scope.messages = angularFireCollection(new Firebase(url).limit(50));
        console.log($scope.messages);
      $scope.username = 'Guest' + Math.floor(Math.random()*101);
      $scope.addMessage = function() {
        $scope.messages.add({from: $scope.username, content: $scope.message});
        $scope.message = "";
      }
    }
  ])
  .directive('autoScroll', function($timeout) {
    return function(scope, elements, attrs) {
      scope.$watch("messages.length", function() {
        $timeout(function() {
          elements[0].scrollTop = elements[0].scrollHeight
        });
      });
    }
  });


function validateForm(){
    return false;
}