I am trying to display the caret position of my editor on a specific place on the website. I have created a directive and service to share variables between the controller and directive. Inside the directive, I have enabled events like "keyup", "mouseup", etc. These events trigger, the service gets updated with correct values, and the Angular controller sees that the value has changed but the view does not refresh.
I suspect that these events are not informing Angular to refresh the view. How can I accomplish this properly? Here is my code.
It's also worth noting that the directive called "EditorEvents" is placed in a different location. Both only have a common root (are not nested).
class EditorEvents {
public link: (scope: IExpressionEditor, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
private service: DebugValuesService;
constructor(text: string, service: DebugValuesService) {
this.service = service;
EditorEvents.prototype.link = (scope: IExpressionEditor, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
element.val(text);
element.on("input propertychange", (event: JQueryEventObject) => {
console.log('INFO: expression changed, new value: ', element.val());
this.setServiceValues(scope, element);
});
element.on("keyup", (event: JQueryEventObject) => {
if (event.which >= 37 && event.which <= 40) {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
this.setServiceValues(scope, element);
}
});
element.on("mouseup", (evet: JQueryEventObject) => {
console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
this.setServiceValues(scope, element);
});
};
}
private setServiceValues(scope: IExpressionEditor, element: ng.IAugmentedJQuery) {
var cursor = EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]);
var text = element.val();
this.service.SetCursorPosition(cursor);
this.service.SetScriptLength(text.length);
this.service.Text = text;
}
private static GetCaretPosition(element: HTMLInputElement): number {
...
}
public static Factory(text: string) {
var directive = (service: DebugValuesService) => {
return new EditorEvents(text, service);
};
directive['$inject'] = [];
return directive;
}
}
and associated with this controller service
class DebugModeController extends BaseController<IDebugObject> {
constructor($scope: IDebugObject, service: DebugValuesService, $interval) {
super($scope, "DebugModeController");
$scope.IsDebugMode = () => Configuration.IsDebugMode;
$scope.Service = service;
}
}
The values should be visible here:
<div ng-controller="DebugModeController" class="debug-controller" ng-show="{{ IsDebugMode() }}">
<input disabled="disabled" type="hidden" ng-model="Service.ScriptLength" />
<input disabled="disabled" type="hidden" ng-model="Service.CursorPosition" />
<table>
<thead>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>Script length</td>
<td>{{ Service.ScriptLength }}</td>
</tr>
<tr>
<td>Cursor position</td>
<td>{{ Service.CursorPosition }}</td>
</tr>
</tbody>
</table>
</div>