Le modèle ne se met pas à jour dans ng-if

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

'use strict';

var ctrl = function ($scope) {
    $scope.foo = false;
};
<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'attendrais à ce que cliquer sur un des boutons mette foo = true, mais en cliquant sur le premier bouton (dans le ng-if="!foo") ne change pas le modèle.

la version testée est 1.2.1.

14
demandé sur Mosh Feu 2013-11-19 13:17:02

3 réponses

ng-if a sa propre portée, donc vous devez utiliser:

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

mise à Jour de violon: http://jsfiddle.net/78R52/1/

25
répondu thebenedict 2013-11-19 09:20:09

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

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

4
répondu stofl 2013-11-19 09:20:36

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 une fonction de portée appelée dans 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>
0
répondu Mahmood .K Samaha 2016-08-05 20:00:31