When working with a directive that takes a data object and a function in its isolate scope, I encountered an issue. Inside the link function, I declared a method to be triggered on a button click event.
The problem is that while the value passed to the method works fine, the scope variable remains undefined.
Directive:
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 = '';
};
}
}
}
]);
Within the link function, the data passed into scope.sendComment is accessible, but scope.newComment remains undefined.
Template:
<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>
Any help or suggestions would be greatly appreciated!
edit: I am looking to clear the input text field after entering a comment.