Le modèle n'est pas mis à jour dans les ng-si

J'ai un comportement étrange dans angulaire de l'application et je ne sais pas si c'est un bug ou d'une limitation connue:

JS:

'use strict';

var ctrl = function ($scope) {
    $scope.foo = false;
};

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ctrl">
  foo: {{foo}}
  <div ng-if="foo" style="background-color: #f00;">
    <p>foo</p>
  </div>
  <div ng-if="!foo">
    <br/><button ng-click="foo = true;">Show foo</button>
  </div>
  <button ng-click="foo = true">Show foo</button>
</div>

http://jsfiddle.net/78R52/

Je m'attends à ce qu'en cliquant sur un des boutons serait mis foo = true, mais en cliquant sur le premier bouton (à l'intérieur de la ng-if="!foo") ne modifie pas le modèle.

Version testée est 1.2.1.

InformationsquelleAutor stofl | 2013-11-19
  1. 25

    ng-if a son propre champ d'application, donc vous devez utiliser:

    <br/><button ng-click="$parent.foo = true;">Show foo</button>

    Mis à jour le violon: http://jsfiddle.net/78R52/1/

    • Je vous remercie. J'ai eu cette idée après avoir poster ma question, trop. Doit avoir été à la recherche dans les docs de ng-if avant de demander...
    • Merci! Trouvé ce avant de tirer sur mes cheveux!
    InformationsquelleAutor thebenedict
  2. 4

    Ah, ng-if crée une nouvelle portée! Donc, "il y a un point dans le nom de modèle"!

    http://jsfiddle.net/78R52/2/

    • Droit, et depuis le ng-si la portée est un enfant du contrôleur de portée, vous pouvez également utiliser $parent.toto à l'accès foo sur le contrôleur de portée.
    InformationsquelleAutor stofl
  3. 0

    Comme d'autres l'ont dit, ng-si a son propre champ.
    Ce que je veux dire, c'est une mauvaise pratique de mettre des expressions dans la vue. La bonne pratique est d'avoir un champ d'application de la fonction qui est appelée au sein de la vue.

    var ctrl = function($scope){
$scope.foo = false;
$scope.fn = fn;
function fn(){
$scope.foo = true;
}
/////

<div ng-app ng-controller="ctrl">
  foo: {{foo}}
  <div ng-if="foo" style="background-color: #f00;">
    <p>foo</p>
  </div>
  <div ng-if="!foo">
    <br/><button ng-click="fn()">Show foo</button>
  </div>
  <button ng-click="fn()">Show foo</button>
</div>
    • Tous les arguments, pourquoi vous appelez-ce une mauvaise pratique?
    • Vous savez, angulaire a beaucoup de bonnes et de mauvaises pratiques. J'ai appelé une mauvaise pratique, car des problèmes comme la vôtre peuvent apparaître, surtout quand vous avez plusieurs étendues encapsulant les uns les autres, comme plusieurs ng-répétitions, ng-fi et d'autres directives.
    • Bon, je vous remercie!
    InformationsquelleAutor Mahmood .K Samaha