Question

我需要在网站的某个地方显示我的编辑的插入位置。我制定了指令和服务来共享控制器和directice之间的变量。在内部指令中，我打开了诸如＆＃34; keyup＆＃34;，＆＃34; mouseup＆＃34;等事件。此事件触发，服务正在更新为正确的值，角度控制器看到此值已更改，但视图未刷新。

我认为这个事件并没有告知角度刷新视图。怎么做得好？这是我的代码。

此指令也称为＆＃34; EditorEvents＆＃34;放在不同的地方。两者都只有共同的根（不是嵌套的）

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

Answer 1

我认为这个事件并没有告知角度刷新视图。怎么做得好？这是我的代码。

您需要使用摘要触发角度1.x脏检查，例如改变：

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

到：

1.dslkjfladsdjgmvjfgmldskbm;sldkvmg,;sdlmg;msj,;sdrl
2.dlkjfsadfjmsal;jsalv;dsvmdsfkgmrg,pvtpvhtphb[h.[y
3.fljsafckg,ksd,v;vyklt;vlkbmyulnmktr,ouf,f/.n,
4.dflcajsmglsdv;ks'ítb;pjk.'gpjnuk. uo.hulmk,vgjhumk.'l

视图未对元素事件进行更新

1 个答案: