Question

我有一个指令，它接收一个数据对象和一个函数到它的隔离范围。在链接函数中，我声明一个范围方法在某个事件中触发（按钮点击）。

问题是传递给上述方法的值在其中可用，但范围变量仍为undefined。

指令：

commentsModule.directive('commentsDirective', [ function() {
        return {
            restrict: 'E',
            templateUrl: '/alarm-viewer-comments-template.html',
            scope: {
                alarmComments: "=value",
                sendNewComment: "&sendNewComment"
            },
            link: function(scope, elems, attrs, ngModelCtrl) {
                scope.sendComment = function(data) {
                    console.log(scope.newComment);//this newComment variable is undefined
                    scope.sendNewComment(data);//data is correct
                    scope.newComment = '';
                };
            }
        }
    }
]);

此处内部链接功能，data传递到scope.sendComment但是scope.newComment获得undefined。模板：

<h4>Comments</h4>
<div ng-repeat="comment in alarmComments.comments">
    <p>{{comment.timestamp}} | <strong>{{comment.user}}</strong>: {{comment.commentType}} {{comment.comment}}</p>
</div>
<div ng-if="alarmComments.editPermission && alarmComments.isActiveAlarm">
    <form name="commentsForm" role="form"  track-form>
        <input type="text" ng-model="newComment" pattern="/.{1,}" maxlength="4" required ng-enter="sendComment(newComment)"/>
        <button type="button" class="btn btn-primary" ng-disabled="commentsForm.$invalid" ng-click="sendComment(newComment)">Send</button>
    </form>
</div>

UI：

<comments-directive value="alarmComments" send-new-comment="addNewComment(comment)"></comments-directive>

有人可以帮助我......？

编辑：我想要的是在输入评论后清除输入文本字段。

Answer 1

在指令范围内，您还应该将newComment属性与alarmComments一起映射。如下 -

scope: {
    alarmComments: "=value",
    newComment: "=newComment",
    sendNewComment: "&sendNewComment"
},

Answer 2

调试此类问题的好方法是渲染范围ID（范围。$ id）并验证它们具有相同的ID。

您可以在链接期间验证范围是什么。$ id并在模板中呈现它？

<h4>Comments</h4>
<div ng-repeat="comment in alarmComments.comments">
<p>{{comment.timestamp}} | <strong>{{comment.user}}</strong>:   {{comment.commentType}} {{comment.comment}}</p>
</div>
 <div ng-if="alarmComments.editPermission && alarmComments.isActiveAlarm">
<form name="commentsForm" role="form"  track-form>
    <input type="text" ng-model="newComment" pattern="/.{1,}" maxlength="4" required ng-enter="sendComment(newComment)"/>
    <button type="button" class="btn btn-primary" ng-disabled="commentsForm.$invalid" ng-click="sendComment(newComment)">Send</button>
{{$id}}
</form>
</div>

有时模板会创建自己的范围，您可能必须在模板中使用$ parent.newComment。

孤立范围变量在链接函数

2 个答案: