Running into an issue with my directive where the model isn't updating as expected. Here's a snippet of my HTML code:
<div class="text-area-container">
<textarea ng-model="chatText" ng-keyup="updateCount(chatText)"></textarea>
</div>
<input ng-disabled="disableCommentButton()" value="Comment" ng-click="addMessage(chatText)"/>
In the code above, you can see that I've used ng-model on the <textarea>. Additionally, there's a ng-keyup event attached to the element which counts the number of characters in the model. Also, I have a ng-disabe attribute on an input field which is controlled by a function. Below is the link function from my directive:
link: function(scope) {
scope.chatText = '';
scope.countRemaining = 500;
scope.updateCount = function(chatText) {
scope.chatText = chatText;
scope.countRemaining = scope.maxChatCount - chatText.length;
};
scope.disableCommentButton = function() {
return _.isUndefined(scope.encounter) || _.isEmpty(scope.chatText);
};
}
The issue I'm facing is that the scope.chatText appears to be undefined within the disableCommentButton method. I was under the impression that binding a model to an element in the html would automatically give me access to it in the scope. Any ideas on what could be causing this problem?