Question

我有一个带控制器的指令，它构建了一个表单，用于通过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'

在指令中，当模板在textarea中呈现时，它会出现，并且postComments（）函数中的if语句会触发。但是，如果我更改textarea中的文本，然后点击发布按钮，$scope.comment_text的内容仍然是“初始文本”，它似乎是单向绑定。

Answer 1

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

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

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

 <textarea 
            ng-model="comment.comment_text">
 </textarea>

Answer 2

好的，通过将comment_text更改为comment.text，它解决了问题，正如此SO答案所建议的那样：

angular-bootstrap (tabs): data binding works only one-way

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

模板中的AngularJS ng-model传递给指令控制器

2 个答案: