2016-08-04 27 views
4

In meinem Winkel definieren ich eine Bereichsvariable $scope.letter_content. Wenn die Ansicht geladen ist, lade ich eine Zeichenfolge aus meiner Datenbank und setze sie auf $scope.letter_content. Dann bevölkere ich einen Texteditor (Froala), den ich benutze.

Unten ist der Code für die Ansicht:

{{letter_content}} 
    <div ng-if="formData['page_number'] == 1 "> 
     {{letter_content}} 
     <textarea id="froala-sample-2" froala="froalaOptions" ng-model="letter_content"></textarea> 
    </div> 

Also im Grunde stelle ich letter_content als ng-Modell für den Texteditor. Wenn ich also Änderungen am Texteditor vornimmt, ändert sich der Wert $scope.letter_content.

Eine Sache, die ich es seltsam fand, ist, dass, wenn ich den Text im Texteditor ändere, es {{letter_content}} innerhalb des div ändert. Es aktualisiert jedoch nicht {{letter_content}} außerhalb der div.

Wenn ich fertig bin, den Text in meinem Texteditor zu bearbeiten, sende ich eine Put-Anfrage, um den Wert in der Datenbank mit $scope.letter_content zu aktualisieren. Es sendet jedoch {{letter_content}} außerhalb der div, die den Inhalt nicht aktualisiert.

Warum passiert dieses komische Ding?

+0

sich ein kleines Experiment tun - Änderung 'ng-if' zu' ng-show', wenn es funktioniert ich – AranS

Antwort

10

Eigentlich wurde dies in mehr Links diskutiert.

Verwenden Sie keine primitive Typvariable. Verwenden Sie stattdessen das Objekt im Bereich.

Zum Beispiel nicht wie $scope.primitiveVariale statt dieses wie object.primitiveVariale$scope.object={primitiveVariale:null}

So im Hinblick auf die Verwendung Verwenden Sie dann wird dies in der ganzen Ansicht widerspiegeln werden. Bitte beachten Sie die folgenden Links.

https://github.com/angular/angular.js/wiki/Understanding-Scopes

1

Die ng-if Richtlinie einen neuen Rahmen schaffen, so dass die letter_content innerhalb der div im ng-if Umfang, aber die letter_content außen ist im Steuerungsbereich.

Lesen Sie das API-Dokument, um zu erfahren, welche Direktive einen neuen Bereich erstellt.

Um diese Art von Problem zu vermeiden betrachten die controllerAs syntax

1

verwenden, können Sie jemals dot notation Winkel der gehört?

Lösung

setzen letter_content in einem Objekt. froalaDetails.letter_content zum Beispiel. dann aktualisieren Sie diesen Wert und alles sollte genau so funktionieren, wie Sie möchten.

Erklärung

Uhr dieses sehr kurze Video die vollständigen Details zu erhalten: https://egghead.io/lessons/angularjs-the-dot

1

nicht Normalwerte wie folgt verwenden Sie, müssen Sie diese Werte in ein Objekt setzen, so versuchen Sie in Ihrem Controller:

$scope.obj = { letter_content: null}; 

und dann in der Ansicht:

{{obj.letter_content}} 
0

Versuchen Sie, diese -

$scope.object = {letter_content:null}; 

    {{object .letter_content}} 
    <div ng-if="formData['page_number'] == 1 "> 
     {{letter_content}} 
     <textarea id="froala-sample-2" froala="froalaOptions" ng-model="object .letter_content"></textarea> 
    </div> 
7

ich sehr ähnlich war, aber noch seltsames Problem, wo ich eine meiner scope Variablen mit der Antwort von einem HTTP-Aufruf aktualisiert wird, überraschend, wird meine Ansicht nicht aktualisieren, wenn ich eine anderen HTTP-Anruf zu tätigen und Mit einem anderen meine ich jeden anderen zufälligen HTTP-Aufruf.

Mit den $apply für mich gearbeitet,

$scope.$apply(function() { 
    $scope.resultData.totalResults = response.data.total; 
}); 
+1

Dank eine detaillierte Antwort schreiben würde, dies war nützlich und $ apply arbeitete für mich für eine ähnliche Situation. – noobcode

Verwandte Themen