Блог

Мне нужно показать положение курсора моего редактора в каком-либо месте веб-сайта. Я создал директиву и сервис для совместного использования переменных между контроллером и directice. Внутри директивы я включил такие события, как «keyup», «mouseup» и т. Д. Это событие срабатывает, служба обновляется до правильных значений, и контроллер angular видит, что это значение изменено, но представление не обновляется.

Я предполагаю, что это событие не сообщает angular об обновлении представления. Как это сделать правильно? вот мой код.

Также может быть важно, чтобы эта директива под названием «EditorEvents» размещалась в другом месте. Оба имеют только общий корень (не являются вложенными)

 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 amp;amp; 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);
            });
            //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;
    }
}
  

и связан с этой службой контроллера

 class DebugModeController extends BaseController<IDebugObject> {
    constructor($scope: IDebugObject, service: DebugValuesService, $interval) {
        super($scope, "DebugModeController");

        $scope.IsDebugMode = () => Configuration.IsDebugMode;
        $scope.Service = service;
    }
}
  

Эти значения должны быть видны здесь:

     <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>
  

Я предполагаю, что это событие не сообщает angular об обновлении представления. Как это сделать правильно? вот мой код.

Вам необходимо запустить грязную проверку angular 1.x, используя дайджест, например, изменение:

 element.on("mouseup", (evet: JQueryEventObject) => {
  console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
  

Для:

 element.on("mouseup", (evet: JQueryEventObject) => {
  console.log('INFO: caret changed, new value: ', EditorEvents.GetCaretPosition(<HTMLInputElement>element[0]));
  scope.$apply();