AngularJS ng-model in template passed to directive controller

Question

I've got a directive with a controller, that builds a form for posting comments to an API via CommentsService

My directive looks a bit lik this:

app.directive('appComments', function( CommentService ) {
    return {
        restrict: 'E',
        scope: {
            event: '='
        },
        controller: function( $rootScope, $scope, $element ) {

            $scope.comments = [];
            $scope.comment_text = '';

            // load comments if event ID has changed
            $scope.$watch( 'event', function() {
                if( typeof $scope.event != 'undefined' ) {
                    CommentService.get( $scope.event ).then(
                        function( comments ) {
                            $scope.comments = comments;
                        }
                    );
                }
            });

            // post comment to service
            $scope.postComment = function() {
                if( $scope.comment_text != '' ) {

                    CommentService.post(
                        $scope.event,
                        $scope.comment_text,
                        function() {
                            // code to reload comments
                        }
                    );
                }
            };
        },
        templateUrl: '/partials/comments.html'
    };
});

This is my comments.html for the directive

<div class="event-comments">
    <p ng-if="!comments.length">
        <span>This event has no comments.</span>
    </p>
    <div 
        class="event-comment" 
        ng-repeat="comment in comments"
    >
        <div class="comment-text">{{comment.text}}</div>
    </div>
</div>
<div class="insert-comment-container" ng-if="!loading">
    <form ng-submit="postComment()">
        <textarea 
            ng-model="comment_text"
        ></textarea>
        <div
            ng-tap="postComment()"
        >Post</div>
    </div>
</div>

This is how I'm placing it in my main view:

<app-comments event="event.id"></app-comments>

My comments are loading, and the event id is getting passed, but when I try and post a comment the comment_text is blank.

I think I'm getting my scopes mixed up or something, I'm still not completely clear on directives

** update **

I've just realised if I set

$scope.comment_text = 'Initial text'

in the directive, it appears when the template renders inside the textarea, and the if statement in the postComments() function fires. But if I change the text in the textarea, and tap the post button, the contents of $scope.comment_text is still "Initial text", it seems to be a one way binding.

Answer 1

Ok so by changing comment_text to comment.text it solved the problem, as recommended by this SO answer:

angular-bootstrap (tabs): data binding works only one-way

Using an object instead of a primitive just uses the same reference to the object property, instead of copying the primitive into the new scope.

Answer 2

Since you are using form i believe it creates a new scope scope. As per documentation

If the name attribute is specified, the form controller is published onto the current scope under this name.

Try to give your form a name. Or else try to pass the property as object property like

 <textarea 
            ng-model="comment.comment_text">
 </textarea>