javascript - 从指令调用函数到 Controller

Question

我正在尝试使用 Angular 实现从客户端到服务器的简单评论写入。 这是评论表单的 HTML:

<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>

我在 "submitComment()" 函数中使用的 Controller :

'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');
            });
    };
}]);

我使用的指令包装了 html:

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

我使用的服务是标准的http.post 服务，但我不明白为什么 Controller 函数中的console.log() 没有被评论触发。 谢谢。

Answer 1

您没有使用 Controller ，要使用 Controller ，请在函数之前添加 controllerAs 对象。

<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>