Angulaire $portée variable de ne pas mettre à jour

Dans mon angulaire, je définir une étendue variable $scope.letter_content. Lorsque la vue est chargé, je me charge de chaîne à partir de ma base de données et mis à $scope.letter_content. Ensuite, j'ai complété sur une texteditor(Froala) je suis en utilisant.

Ci-dessous est le code pour l'afficher:

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

Donc en gros j'ai mis letter_content ng-modèle pour la texteditor. Donc, quand je fais des modifications sur le texteditor, il modifie la valeur $scope.letter_content.

Une chose je l'ai trouvé bizarre, c'est que quand je modifie le texte dans la texteditor, il change {{letter_content}} à l'intérieur de la div. Cependant, il ne met pas à jour {{letter_content}} en dehors de la div.

Lorsque j'ai terminé l'édition du texte dans mon texteditor, j'ai envoyer une demande de mise à jour la valeur dans la base de données avec $scope.letter_content. Cependant, il finit par l'envoi d' {{letter_content}} en dehors de la div qui finit par ne pas mettre à jour le contenu.

Pourquoi est cette chose étrange qui se passe?

Faisons une petite expérience de changement ng-if à ng-show, si cela a fonctionné, je vais écrire une réponse détaillée
Oui, il est ng-show . Merci pour cette remarque s'accoupler. Cheers!

OriginalL'auteur JoHksi | 2016-08-04

  1. 16

    En fait ce qui a été discuté dans plus de liens.

    Ne pas utiliser de variable de type primitif. Plutôt que d'utiliser des objets dans le champ d'application.

    Par exemple,
    Ne pas utiliser comme $scope.primitiveVariale au lieu de cela $scope.object={primitiveVariale:null}

    Donc, en vue de les utiliser comme object.primitiveVariale puis ce sera le refléter dans tous les point de vue. Veuillez consulter les liens suivants.

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

    OriginalL'auteur

  2. 13

    J'ai eu très similaire, mais encore plus étrange problème où j'ai été la mise à jour de l'un de mes scope variables à l'aide de la réponse d'un appel HTTP, étonnamment, mon avis ne sera pas mise à jour, sauf si je fais un appel HTTP et par un autre je veux dire tout les autres aléatoire HTTP appel.

    À l'aide de la $apply a fonctionné pour moi,

    $scope.$apply(function () {
     $scope.resultData.totalResults = response.data.total;
});
    Merci, cela a été utile et $s'appliquent a fonctionné pour moi pour une situation similaire.

    OriginalL'auteur Saumil

  3. 4

    La ng-if directive créer un nouveau champ d'application, de sorte que le letter_content à l'intérieur de la div est dans le ng-if portée, mais la letter_content à l'extérieur est dans le contrôleur de portée.

    Lire la doc API de savoir que la directive créer un nouveau champ d'application.

    Pour éviter ce genre de problème, pensez à utiliser le controllerAs syntaxe

    OriginalL'auteur fantarama

  4. 3

    pouvez-vous jamais entendu parler de l'angulaire de l' dot notation?

    solution

    mettre letter_content dans un objet. froalaDetails.letter_content par exemple. ensuite mettre à jour cette valeur et tout devrait fonctionner exactement comme vous le souhaitez.

    explication

    regarder cette vidéo très courte pour obtenir tous les détails: https://egghead.io/lessons/angularjs-the-dot

    OriginalL'auteur Bamieh

  5. 3

    Ne pas utiliser tout simplement des valeurs de ce type, vous avez besoin de mettre ces valeurs dans un objet, essayez donc de votre contrôleur:

    $scope.obj = { letter_content: null};

    et alors à votre avis:

    {{obj.letter_content}}

    OriginalL'auteur Antipod

  6. 2

    Essayer ce -

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

    OriginalL'auteur Ranjit Sahu