Ansicht ist nicht aktualisiert auf Element Ereignis

Question

Ich brauche Caret Position meines Editors an irgendeiner Stelle der Website anzeigen. Ich habe Anweisung und Service gemacht, um Variablen zwischen Controller und Directice zu teilen. Innerhalb der Direktive habe ich Ereignisse wie "keyup", "mouseup" usw. aktiviert. Dieses Ereignis wird ausgelöst, der Dienst wird aktualisiert, um die Werte zu korrigieren, und der Winkelregler sieht diesen Wert geändert, aber die Ansicht wird nicht aktualisiert.

Ich erkläre, dass dieses Ereignis nicht eckigen zu aktualisieren Anzeige aktualisiert. Wie man es richtig macht? Hier ist mein Code.

Es kann auch wichtig sein, dass diese Anweisung "EditorEvents" an anderer Stelle platziert wird. Beide haben nur gemeinsame Wurzel (nicht verschachtelt sind)

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

und mit diesem Controller Dienst zugeordnet

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

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

Diese Werte sollten hier sichtbar sein:

<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

ich quess dass Dieses Ereignis informiert die eckige Ansicht nicht, um die Ansicht zu aktualisieren. Wie man es richtig macht? Hier ist mein Code.

Sie müssen eine verwaschene eckige 1.x-Prüfung mit einem Digest, z. Änderung:

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

zu:

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