Call a function from a directive to the controller

Question

I am trying to implement a simple comment writing from client to server using angular. Here is the HTML for the comment form:

<form  id="commentsForm" name="commentsForm" ng-submit="submitComment()">
  <fieldset>
    <legend>Post a comment</legend>
    <div class="form-group comment-group">
      <label for="comment" class="control-label">Comment</label>
      <div class="control-field">
        <textarea class="form-control" cols="30" rows="5" name="comment" id="comment-textarea" tabindex="3" ng-model="c.comment" required></textarea>
      </div>
    </div>
    <div class="form-group button-group">
      <div class="control-field">
        <button type="submit" class="btn btn-primary btn-comment" tabindex="4" >Post comment</button>
      </div>
    </div>
  </fieldset>
</form>

And the controller I use with the "submitComment()" function:

'use strict';
// inject scope, services (CommentService)
//

angular.module('mean.groups').controller('CommentsCtrl', ['$scope','Global', 'CommentsService', function($scope, CommentsService) {
    $scope.c = {};
    console.log("controller is online");
    $scope.submitComment = function (comment) {
        console.log("activted submit comment function");
        var postCommentData = {};
        postCommentData.postingTime = new Date();
        postCommentData.commentData = $scope.c.comment;
        console.log("in controller:" + postCommentData);
        CommentsService.postComment(postCommentData)
            .then(function () {
                $scope.commentsForm.$setPristine();
                $scope.c = {};
                console.log('posted');
            });
    };
}]);

And the directive I use wrap the html:

'use strict';
angular.module('mean.directives').directive('commentForm', function() {
        return {
            restrict: 'E',
            templateUrl: 'comments/views/comment-form.html',
            controller: 'CommentsCtrl',
            controllerAs: 'commentsForm'
        }
    });

The service I use is a standard http.post service but I don't understand why the console.log() in the controller function is not triggered with the comment. Thanks.

Answer 1

You aren't using the controller, to use the controller add the controllerAs object before the functions.

<form  id="commentsForm" name="commentsForm" ng-submit="commentsForm.submitComment()">
<fieldset>
<legend>Post a comment</legend>
<div class="form-group comment-group">
  <label for="comment" class="control-label">Comment</label>
  <div class="control-field">
    <textarea class="form-control" cols="30" rows="5" name="comment" id="comment-textarea" tabindex="3" ng-model="commentsForm.c.comment" required></textarea>
  </div>
</div>
<div class="form-group button-group">
  <div class="control-field">
    <button type="submit" class="btn btn-primary btn-comment" tabindex="4" >Post comment</button>
  </div>
</div>

Answer 2

Here is the answer, I just add :

 link: function($scope, element, attrs) {
 $scope.submitComment = function () {
      //my code logic ...
   }
}

And changed the replace to false:

replace: false;