使用angularjs在Firebase中存储注释

Question

Here is a form:

<span class="input-label">Name</span>
<input ng-model="name" type="text">
<span class="input-label">Comment</span>
<input ng-model="msg" type="text">
<button ng-click="addMessage()">Comment</button>

On firing click event, I call the addMessage() function in the controller:

app.controller('CommentCtrl', ['$scope', '$firebase', function($scope, $firebase){
    var myRootRef = new Firebase("my://app/link");
    $scope.addMessage = function() {
        /*
         * How do I store the name and comment obtained
         * from the form in firebase.
         *
         * set, push does not work at all
        */
        $scope.modal.hide();
    }
}]);

Answer 1

You're really close, just a couple of things.

We need to create an AngularFire binding by passing in a Firebase reference. Since we're using ng-model we can grab the properties from $scope . However, it's probably a good idea to provide a default value for the name and comment properties.

When we call addMessage we need to go to a child location for messages by calling $child . Then we can add a new message by calling $add .

Plunker Demo

app.controller('CommentCtrl', ['$scope', '$firebase', function($scope, $firebase){
    var myRootRef = new Firebase("my://app/link");
    $scope.messages = $firebase(myRootRef); // AngularFire binding created here

    // default values
    $scope.name = '';
    $scope.msg= '';

    $scope.addMessage = function() {
        // go to the messages location and push the item by calling $add
        $scope.messages.$child('messages').$add({
          name: $scope.name,
          comment: $scope.msg
        });

        // clear out the values after adding them to Firebase
        $scope.msg= '';
        $scope.name = '';

        $scope.modal.hide();
    }
}]);