AngularJS: ng-show / ng-hide não funciona com a interpolação `{{}}`

Eu estou tentando mostrar / ocultar algum HTML usando as funções ng-show e ng-hide fornecidas pelo AngularJS .

De acordo com a documentação, o respectivo uso para essas funções é o seguinte:

ngHide – {expressão} – Se a expressão for definida, o elemento será mostrado ou oculto, respectivamente. ngShow – {expression} – Se a expressão for truthy, o elemento será mostrado ou oculto, respectivamente.

Isso funciona para o seguinte usecase:

 

I'm hidden

I'm shown

No entanto, devemos usar um parâmetro de um object como a expressão, em seguida, o ng-hide e ng-show recebem o valor true / false correto, mas os valores não são tratados como um booleano, portanto sempre retornam false :

Fonte

 

I could be shown, or I could be hidden

I could be shown, or I could be hidden

Resultado

 

I should be hidden but I'm actually shown

I should be shown but I'm actually hidden

Isso é um bug ou não estou fazendo isso corretamente.

Não consigo encontrar nenhuma informação relativa na referência de parâmetros de object como expressões, então eu estava esperando que alguém com um melhor entendimento do AngularJS pudesse me ajudar?

A referência foo.bar não deve conter as chaves:

 

I could be shown, or I could be hidden

I could be shown, or I could be hidden

Expressões angulares precisam estar dentro das vinculações de chaves, onde as diretivas Angulares não.

Veja também Entendendo modelos angulares .

Você não pode usar {{}} ao usar diretivas angulares para vincular com ng-model mas para vincular atributos não-angulares, você teria que usar {{}} .

Por exemplo:

 ng-show="my-model" title = "{{my-model}}" 

Tente envolver a expressão com:

 $scope.$apply(function() { $scope.foo.bar=true; }) 

Como ng-show é um atributo angular, eu acho que não precisamos colocar os parênteses de flor de avaliação ( {{}} ) ..

Para atributos como class , precisamos encapsular as variables ​​com colchetes de flor de avaliação ( {{}} ).

   
If true the show otherwise hide.
If true the show otherwise hide.

remova {{}} chaves ao redor de foo.bar porque expressões angulares não podem ser usadas em diretivas angulares.

Para mais: https://docs.angularjs.org/api/ng/directive/ngShow

exemplo

   

I could be shown, or I could be hidden

I could be shown, or I could be hidden

Se você quiser mostrar / ocultar um elemento baseado no status de uma {{expressão}}, você pode usar o ng-switch :

 

I could be shown, or I could be hidden

O parágrafo será exibido quando foo.bar for verdadeiro, oculto quando falso.