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'

ディレクティブでは、テンプレートがテキストエリア内でレンダリングされるときに表示ifされ、postComments() 関数のステートメントが起動します。しかし、テキストエリアのテキストを変更して投稿ボタンをタップすると、内容は$scope.comment_text「初期テキスト」のままで、一方向バインディングのようです。

4

2 に答える 2

0

フォームを使用しているので、新しいスコープスコープが作成されると思います。ドキュメントによると

name 属性が指定されている場合、フォーム コントローラーはこの名前で現在のスコープに発行されます。

フォームに名前を付けてみてください。または、プロパティをオブジェクトプロパティとして渡そうとします

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