0

我有一个带有控制器的指令，它构建了一个表单，用于通过 CommentsService 向 API 发布评论

我的指令看起来有点像这样：

app.directive('appComments', function( CommentService ) {
    return {
        restrict: 'E',
        scope: {
            event: '='
        },
        controller: function( $rootScope, $scope, $element ) {

            $scope.comments = [];
            $scope.comment_text = '';

            // load comments if event ID has changed
            $scope.$watch( 'event', function() {
                if( typeof $scope.event != 'undefined' ) {
                    CommentService.get( $scope.event ).then(
                        function( comments ) {
                            $scope.comments = comments;
                        }
                    );
                }
            });

            // post comment to service
            $scope.postComment = function() {
                if( $scope.comment_text != '' ) {

                    CommentService.post(
                        $scope.event,
                        $scope.comment_text,
                        function() {
                            // code to reload comments
                        }
                    );
                }
            };
        },
        templateUrl: '/partials/comments.html'
    };
});

这是我的comments.html 指令

<div class="event-comments">
    <p ng-if="!comments.length">
        <span>This event has no comments.</span>
    </p>
    <div 
        class="event-comment" 
        ng-repeat="comment in comments"
    >
        <div class="comment-text">{{comment.text}}</div>
    </div>
</div>
<div class="insert-comment-container" ng-if="!loading">
    <form ng-submit="postComment()">
        <textarea 
            ng-model="comment_text"
        ></textarea>
        <div
            ng-tap="postComment()"
        >Post</div>
    </div>
</div>

这就是我将它放在我的主视图中的方式：

<app-comments event="event.id"></app-comments>

我的评论正在加载，并且事件 ID 正在通过，但是当我尝试发表评论时，它comment_text是空白的。

我想我的范围混淆了或其他什么，我对指令仍然不完全清楚

** 更新 **

我刚刚意识到如果我设置

$scope.comment_text = 'Initial text'

在指令中，当模板在文本区域内呈现时出现，并且ifpostComments() 函数中的语句触发。但是如果我更改了textarea中的文本，然后点击发布按钮，内容$scope.comment_text仍然是“初始文本”，这似乎是一种单向绑定。

4

2 回答 2

0

由于您使用的是表单，我相信它会创建一个新的范围。根据文档

如果指定了 name 属性，则表单控制器以该名称发布到当前范围。

尝试为您的表单命名。或者尝试将属性作为对象属性传递，例如

 <textarea 
            ng-model="comment.comment_text">
 </textarea>
于 2013-12-19T16:42:44.710 回答
0

好的，按照这个 SO 答案的建议，通过更改comment_text它comment.text解决了问题：

angular-bootstrap (tabs)：数据绑定只能单向工作

使用对象而不是原语只是使用对对象属性的相同引用，而不是将原语复制到新范围内。

于 2014-01-02T12:02:34.320 回答