ng-show & ng-hide not updating visibility even though assigned values are being updated

[Sanja Rogers]

I want to show alerts based on selection (drop down) & results length:

<alert

ng-hide="!selected_foo.id" 

type="notification.type.no_foo"

>

{{!selected_foo.id}}

{{notification.msg.no_foo}}

</alert>

<alert

ng-show="!results.length" 

type="notification.type.no_results"

>

{{!results.length}}

{{notification.msg.no_results}}

</alert>

The notifications show all the time.  I print the values and they change from true to false correctly but the no-show is not affected.  I have also tried setting the values in the controller: $scope.notification.show.no_results = !results.lenght - it didn't work.  Any ideas?  

[Michael Bertolacci]

Hello Sanja,

How are you triggering the changes?

You may need to wrap the code that changes $scope.results in $scope.$apply, which will trigger a digest so ng-show knows to update the visibility of the element.

Take a look at http://docs.angularjs.org/guide/scope for more information.

Hope this helps!

Michael

[Pawel Kozlowski]

Hi!

I'm assuming that you are using the <alert> directive from
http://angular-ui.github.io/bootstrap/ - hard to say for sure without
a live plunk code, but your markup and problem description makes me
think that you are taking about this project.

If so you are bumping into a scoping issue. Basically the alter
directive creates a new isolated scope and a given DOM element can
have only one scope assigned in AngularJS which means that the
ng-show/ng-hide directive evaluates against an isolated scope and not
your controller scope. A simple remedy is to use
$parent.results.length. Sample plunk here:
http://plnkr.co/edit/EkjTQHm32VLIligP8lsN?p=preview

We might review the strategy of using isolated scopes for alerts in
the future as those scoping issues seem to be a bit confusing.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Christopher Macrander]

Pawel - 

I lost about an hour to this issue. I wasn't expecting alerts to create a new, isolated scope, ESPECIALLY since other attributes used in the alert DON'T use an isolated scope. Here's what a I mean:

<alert ng-show="$parent.myAlert" type="myAlert.type">[[ myAlert.msg ]]</alert>

While the type is set in the expected scope and I can directly access the myAlert object, in the ng-show expression, I have to INDIRECTLY access the SAME object. This is unexpected and incredibly confusing.

Chris