javascript - ng-model 未捕获 ng-repeat 中的值

Question

我正在开展一个项目，涉及 firebase和Angular 。我想要实现的是从 textarea 捕获一个值元素嵌套在ng-repeat中它显示了 firebase 数据库中的用户帖子。我需要在用户帖子中添加评论，但是当我尝试使用 ng-model 从 textarea 元素捕获评论数据时ng-repeat 内的指令该值尚未正确捕获，我收到以下错误消息:

TypeError: Cannot read property 'newComment' of undefined at m.$scope.addCommentPost

这是firebase数据库:

HTML:

<div class="row hide-on-med-and-down" id="ng-repeat" ng- repeat="PostList in PostList | orderBy: 'created_at':true">
  <div class="col s12">
    <div style="margin-top: 15px">
      <div class="card horizontal z-depth-1" style="width: 900px; margin: 0 auto">
        <div style="max-height: 400px " class="card-image">
          <img style="max-height: 400px " src="{{PostList.downloadURL}}">

        </div>
        <div class="card-stacked">
          <div class="card-content">
            <span class="card-title">Card Title</span>
            <p>{{PostList.post}}</p>
          </div>
          <div class="card-action">
            <a ng-click="editPost(PostList.$id);" class="btn-floating  waves-effect waves-light blue-grey lighten-4"><i class="material-icons">mode_edit</i></a>
            <a style="margin-left: 5px" class="btn-floating  waves-effect waves-light blue-grey lighten-4 "><i class="material-icons">thumb_up</i></a>
            <a style="margin-left: 5px" ng-click="ConfirmDelete(PostList.$id);" class="btn-floating waves-effect waves-light blue-grey lighten-4"> <i class="material-icons">delete</i></a>
            <a style="margin-left: 5px;" ng-click="collapsibleElement  = !collapsibleElement" name="showComments" class="btn-floating btn-flat"><i style="color: #b0bec5" class="material-icons">question_answer</i></a>
          </div>
        </div>
      </div>
    </div>
    <!-- DIV CONTAINER FOR CARD -->

    <script>
      $('.collapsible').collapsible({
        accordion: false // collpsible + ng-repeat only works inside ng-repeat (the same for any js or jquery)
      });
    </script>

    <div style="margin-top: 10px">
      <ul ng-click="CallComments(PostList.$id);" ng-show="collapsibleElement" class="collapsible z-depth-1" data-collapsible="accordion" style="width: 900px; margin: 0 auto">
        <li>
          <div class="collapsible-header">
            <i class="material-icons">create</i>Add something...
          </div>
          <div class="collapsible-body">
            <form name="regform">
              <div class="row">
                <div class="form-group col s12" ng-class="{ 'has-error' : regForm.email.$invalid }">
                  <textarea ng-model="data.newComment" class="form-control" autofocus placeholder="What do you think?...." id="comments" type=text class="materialize-textarea"></textarea>
                  <p style="color: #13e1ff" class="help-block" ng-show="regForm.email.$invalid">Type Something</p>
                </div>
              </div>
              <div class="row">
                <div class="right">
                  <button ng-click="addCommentPost();" ng-disabled="!data.newComment" class="btn waves-effect waves-light light-blue lighten-2" type="submit" name="action">
                    Submit
                    <i class="material-icons right">send</i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">textsms</i>Comments</div>
          <div class="collapsible-body">
            <p ng-repeat="innerPostList in PostList.PostedComments">{{innerPostList.comments}}</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- DIV CONTAINER FOR COLLAPSE -->
  </div>
</div>

JS:

var firebaseRef = firebase.database().ref('PostUsers/');
$scope.PostList = $firebaseArray(firebaseRef);

$scope.CallComments = function(id) {
  console.log('The post id is: ' + id);
  //RETREIVE DATA BASE POST FROM FIREBASE AS A POST
  var firebaseRef = firebase.database().ref('PostUsers/' + id);
  $scope.PostListUpdate = $firebaseObject(firebaseRef);    
}

//PASSING THE ID DATA FROM THE POST TO THE MODAL
$scope.addCommentPost = function() {       
  if (!$scope.regForm.$invalid) {    
    var comment = $scope.data.newComment;
    console.log(comment);
    firebase.database().ref('PostUsers/' + $scope.PostListUpdate.$id + '/PostedComments').push({    
      comments: comment        
    }).then(function(ref) {    
      var $toastContent = $('<p><span id="iconToast" class="fa fa-user">      </span>Comment added!</p>');
      Materialize.toast($toastContent, 2000, 'message');        
    }, function(error) {
      var $toastContent = $('<p><span id="iconToast" class="fa fa-user"></span>Upss! <br> error happened try again!</p>');
      Materialize.toast($toastContent, 2000, 'message');
      console.log("Error:", error);
    });
  }
}

Answer 1

您收到该错误的原因是您尚未初始化data 的值。在您的 Controller 代码中，在 addCommentPost 函数之外，您应该将其初始化为空对象，因为 data 可能有多个属性，因此在 Controller 定义的顶部附近，但仍在内部，以便您可以访问 $scope 变量，请添加以下 $scope.data = {};