AngularJS pas rafraîchissant ngRepeat lors de la mise à jour de la matrice de

Je vais avoir de sérieux problèmes de compréhension AngularJS parfois. J'ai donc une base de tableau dans mon contrôleur comme

$scope.items = ["a","b","c"]

Je suis ngRepeating dans mon template sur les éléments de la matrice de ng-repeat="item dans les articles". Super simple à ce jour. Après une couple de UX actions, je veux pousser quelques nouvelles choses à mon tableau.

 $scope.items.push("something");

Ainsi, 50% du temps, le nouvel élément est ajouté à la vue. Mais les autres 50%, il ne se passe rien. Et c'est super frustrant, bc si je étirable à l'intérieur de $scope.$appliquer(), j'ai eu un "$digest déjà en cours d'erreur". Habillage en $timeout n'aide pas non plus.

Et quand je l'inspection de mon élément portée à l'aide de l'extension Chrome; je peux voir les nouvelles données sont là et le $scope.les éléments de valeur est correcte. Mais la vue est tout simplement pas prendre soin d'ajouter que, pour les DOM.

Merci!

  • pouvez-vous créer une démo à l'adresse jsfiddle.net
  • Son certainement liées à la digérer cycle. Nous avons besoin de vous pour poster le code que vous utilisez pour mettre à jour le tableau.
  • Je reçois ce problème ainsi, aimerais une réponse!
InformationsquelleAutor spacenick | 2013-03-22
  1. 21

    Vous êtes en train de modifier la portée à l'extérieur de l'angulaire de l' $digest cycle de 50% du temps.

    Si il y a un rappel qui n'est pas de angularjs; (posibbly jquery). Vous devez appeler $apply pour forcer un $digest cycle.
    Mais vous ne pouvez pas appeler $apply tandis que dans $digest cycle, parce que tous les changements que vous faites sera automatiquement répercuté déjà.

    Vous avez besoin de savoir quand le rappel n'est pas de anguleuses et doit appeler $apply seulement alors.

    Si vous ne connaissez pas et de ne pas pouvoir apprendre, voici une astuce:

    var applyFn = function () {
    $scope.someProp = "123";
};
if ($scope.$$phase) { //most of the time it is "$digest"
    applyFn();
} else {
    $scope.$apply(applyFn);
}
    • Je crois que vous devriez éviter de vérifier $scope.$$phase. C'est variable interne, et ne vous fiez pas vous code sur ces, si possible. La meilleure solution serait de vous utiliser $apply où vous êtes absolument sûr qu'il n'y aura pas de $apply déjà en cours. Et c'est pourquoi je vous demande les codes qui peut mettre à jour la portée.
    • Ce n'est pas une bonne manière de coder, je suis d'accord. Pourtant, il ne fonctionne pas et $$phase est très cohérent et fiable, au moins il ne cassera pas votre code de façon inattendue, à l'exception du fait qu'il puisse être changé entre les versions.
    • Il est. Je l'ai déjà utilisé il en effet. La question est que nous ne savons pas si ce sera pause dans la prochaine version mineure, de son état interne du contrôleur. Je suis juste en méditant qu'il y a probablement un meilleur endroit pour mettre la $apply en toute sécurité.
    • Par "Il est" je veux dire la fiabilité de la partie. Nous sommes d'accord sur pas une bonne pratique. Juste pour être sûr 🙂
    InformationsquelleAutor Umur Kontacı
  2. 4

    Comme l'a souligné Umur Kontacı, vous devez effectuer des changements de modèle à l'extérieur de l'empreinte du cycle de parfois. Cependant, au lieu de travailler autour de ce problème et d'essayer de détecter si vous êtes dans une application, digérer le contexte ou pas, je vous suggère de s'assurer que cela n'arrive jamais.

    La cause principale de ce problème est que votre fonction est appelée comme une réaction à des événements DOM. E. g.

    jQuery('.some-element').click(function() { seeminglyProblematicCode() })

    C'est là que votre $apply() doit aller, non pas à l'intérieur de la fonction. Sinon, l'ensemble de votre code sera jalonné de telles distinctions, tôt ou tard. En supposant qu'il existe un champ d'application dans le contexte de ce gestionnaire d'événements, vous pouvez écrire:

    jQuery('.some-element').click(function() { 
    $scope.$apply(function() { seeminglyProblematicCode() })
})

    Cependant, il y a une mise en garde vous devez être conscient: Lorsque vous déclencher un événement de clic à partir de votre code, vous allez courir dans le problème que d'un digest cycle est déjà en cours. C'est là que vous avez besoin de l' $timeout. Les réponses à cette question couvrir ce problème très bien.

    InformationsquelleAutor lex82
  3. 0

    J'ai eu le même problème, et ma solution était de regarder les contrôleurs qui sont appelés dans les directives.

    # Parent Controller
app.controller 'storeController', ($scope, products) ->

  $scope.cart = ["chicken", "pizza"]
  $scope.addToCart = (item) ->
    $scope.cart.push item

  # from service
  products.get().then (items) ->
    $scope.products = items

# Parent Directives
app.directive 'storeContainer', ($scope, config) ->
  restrict: 'E'
  templatUrl: 'store-container.html'
  controller: 'storeController'

# Nested Directive
app.directive 'storeFront', ($scope, config) ->
  restrict: 'E'
  templatUrl: 'store-front.html'
  controller: 'storeController'

# Parent Template templates/directives/store-container.html
<div ng-repeat="item in cart">{{ item }}</div>
<strore-front></store-front>

# Nested Template templates/directives/store-front.html
<ul ng-repeat="item in products">
  <li ng-click"addToCart(item)">{{ item }}</li>
</ul>

    Le bug ici est imbriquée directive crée un deuxième contrôleur dans la chaîne de prototype (un double de storeController), dont le modèle parent n'a pas accès. Pour résoudre écrire imbriquée contrôleur comme suit:

    # Nested Directive
app.directive 'storeFront', ($scope, config) ->
  restrict: 'E'
  templatUrl: 'store-front.html'

    Il y a de meilleures façons de créer de la chaîne d'héritage, mais cela permettra de résoudre le problème pour beaucoup de gens, l'apprentissage AngularJS.

    InformationsquelleAutor brettu