Question

我正在处理涉及firebase和Angular的项目。我想要实现的是从嵌套在textarea中的ng-repeat元素中捕获一个值，该元素显示来自firebase数据库的用户帖子。我需要在用户帖子中添加注释，但是当我尝试使用ng-model内的ng-repeat 指令从textarea元素捕获注释数据时，该值没有已被正确捕获，我收到以下错误消息：

TypeError：无法读取属性＆＃39; newComment＆＃39;未定义的米。$ scope.addCommentPost

这是 firebase 数据库：

enter image description here

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的值。在你的控制器代码中，在addCommentPost函数之外你应该将它初始化为一个空对象，因为data可能有多个属性所以接近控制器定义的顶部，但仍在里面，所以你有权访问$scope变量，添加以下$scope.data = {};

ng-model不捕获ng-repeat中的值

1 个答案: