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()"函数的控制器：

'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服务，但我不明白为什么控制器功能中的console.log（）不会被注释触发。感谢。

Answer 1

您没有使用控制器，使用控制器在函数之前添加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>

Answer 2

以下是答案，我只想补充一下：

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

并将replace更改为false：

replace: false;

从指令调用函数到控制器

2 个答案: